diff --git a/README.md b/README.md index 697b5f5..5edb186 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_887 TILs and counting..._ +_888 TILs and counting..._ --- @@ -99,6 +99,7 @@ _887 TILs and counting..._ - [Apply Styles To The Last Child Of A Specific Type](css/apply-styles-to-the-last-child-of-a-specific-type.md) - [Change The Orientation Of An Image](css/change-the-orientation-of-an-image.md) - [Circular Icons With A Massive Border Radius](css/circular-icons-with-a-massive-border-radius.md) +- [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) - [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) diff --git a/css/conditional-styling-for-unsupported-css-features.md b/css/conditional-styling-for-unsupported-css-features.md new file mode 100644 index 0000000..e9ac9b1 --- /dev/null +++ b/css/conditional-styling-for-unsupported-css-features.md @@ -0,0 +1,32 @@ +# Conditional Styling For Unsupported CSS Features + +As much as possible, you should aim to use CSS features that have broad browser +support. Sometimes browsers lag behind or you'd like to take advantage of a +draft feature in browsers that support it. + +For these situations, you can provide conditional styling using the +[`@supports` +at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports). + +Here is an example of conditionally using `display: grid` if it is supported: + +```css +@supports (display: grid) { + div { + display: grid; + } +} +``` + +In [this +article](https://24ways.org/2019/zs-still-not-dead-baby-zs-still-not-dead/) +there is an example of using `background-blend-mode` and falling back to +`background-image` if it isn't supported. + +```css +@supports not (background-blend-mode: normal) { + body { + background-image: url(fallback.png); + } +} +```