That’s not to say this is a bad article; it’s not. It’s just that there is more to CSS than “here are some rules and ways of using them you might not have thought of”. That’s the real reason front-end dev and design is as difficult as it is.
---
Supported Everywhere:
- Typing Effect (@keyframes)
- Drop Shadow
- Smooth Scrolling
- "center" (flexbox)
- Truncate Text (uses line-camp)
- Resize
- Modals (uses :target)
- calc
- Style Empty (:empty)
- Position Sticky (minus some table elements in old versions)
- Scoll Snap (partial support in even IE)
- Dynamic Tooltips (is just pseudo elements...)
- Caret color (except old IE)
- Fancy Text (uses background clip, so all but old IE)
---
Not Supported Everywhere:
- Cursors (mobile, obviously...)
- ::selection (mobile ignores)
- Custom Scrollbars
---
I think if you put it side-by-side like this you really see how inaccurate your comment is...
- Drop shadow - Custom cursors - Smooth scrolling - Truncate text to a number of lines - Custom scrollbars - Sticky position - Scroll snap - Fancy text - The CodePen CSS button
There is no longer any reason developers building general-audience websites, web apps, or libraries should care about IE support. It's not part of the general conversation anymore.
You only need to cater to IE if you're a developer on one of those legacy sites, or maintain a library that has been around for so long it's still actively used by those legacy sites.
And healthcare. And government. And a lot of other non-Silicon Valley and non-hobby industries.
What did you think I was talking about instead?
Let me guess, "Everywhere" is only the Chrome based, latest browsers?
The only argument being "but not on IE". Which, 100% of these work on almost all versions of Edge. Edge is provided side-by-side with Internet Explorer these days (mostly...).
Internet explorer market share is near zero. Also reminding you that these are just CSS properties (meaning fallbacks are dead-simple or it just looks/behaves boring-er and doesn't break anything).
.tile--custom-scrollbar {
scrollbar-color: rebeccapurple gold;
scrollbar-width: auto;
}
Things that work: - Typing Effect (@keyframes) - Drop Shadow - "center" (flexbox) - Truncate Text (uses line-camp) - Modals (uses :target) - calc - Style Empty (:empty) - Position Sticky - Scroll Snap - Dynamic Tooltips (when using touchpad) - Fancy Text
Things that don’t work: - Smooth Scrolling - Resize - Cursors (even when using the touchpad cursor) - ::selection (even using Safari in “Desktop mode”) - Custom Scrollbars
I could test due to not having a live example: - Caret color