Add Define HSL Colors With Alpha Values as a CSS til

Author: jbranchaud

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_1091 TILs and counting..._
+_1092 TILs and counting..._
 
 ---
 
@@ -125,6 +125,7 @@ _1091 TILs and counting..._
 - [Conditional Styling For Unsupported CSS Features](css/conditional-styling-for-unsupported-css-features.md)
 - [Create A Pulsing Background With CSS Animation](css/create-a-pulsing-background-with-css-animation.md)
 - [Define CSS Custom Properties With CSS Variables](css/define-css-custom-properties-with-scss-variables.md)
+- [Define HSL Colors With Alpha Values](css/define-hsl-colors-with-alpha-values.md)
 - [Display Responsive iframe Maintaining Aspect Ratio](css/display-responsive-iframe-maintaining-aspect-ratio.md)
 - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
 - [Give Elements The Same Width With Flexbox](css/give-elements-the-same-width-with-flexbox.md)

css/define-hsl-colors-with-alpha-values.md

@@ -0,0 +1,43 @@
+# Define HSL Colors With Alpha Values
+
+HSL is a more intuitive option for defining colors in CSS.
+
+It is an acronym which stands for Hue, Saturation, and Lightness which are the
+three components of an HSL value. It is also possible to include a fourth
+value: Alpha for the amount of transparency of the color.
+
+The modern syntax allows you to use `hsl` with or without an alpha value, and
+no need to use comma separators. If the alpha value is included, it must be
+separated from the other three values with a forward slash.
+
+```css
+.modern-hsl {
+  background-color: hsl(340deg 100% 50%);
+}
+.modern-hsla {
+  background-color: hsl(340deg 100% 50% / 0.75);
+}
+```
+
+If you need IE-support, then you'll have to use the older syntax. This version
+of `hsl` requires comma separators, and to apply an alpha value you have to
+switch to `hsla`.
+
+```css
+.old-hsl {
+  background-color: hsl(340deg, 100%, 50%);
+}
+.old-hsla {
+  background-color: hsla(340deg, 100%, 50%, 0.75);
+}
+```
+
+You can see it in action and play around with the value in this [live
+example](https://codepen.io/jbranchaud/pen/gOLVzjx?editors=1100).
+
+
+See [Can I Use? on HSL](https://caniuse.com/?search=hsl) for more details on
+browser support.
+
+h/t to [Josh Comeau](https://twitter.com/JoshWComeau) and his excellent [CSS
+for JS Developers course](https://css-for-js.dev/)