“CSS3” was a massive success for CSS. A whole bunch of stuff dropped essentially at once that was all very terrific to get our hands on in CSS. Gradients, animation/transition, border-radius, box-shadow, transform… woot! And better, the banner name CSS3 (and the spiritual umbrella “HTML5”) took off and the industry was just saturated in learning material about it all. Just look at all the “CSS3”-dubbed material that’s been published around here at CSS-Tricks over the years.
No doubt loads of people boned up on these technologies during that time. I also think there is no doubt there are lots of people that haven’t learned much CSS since then.
So what would we tell them?
Some other folks have speculated similarly. Scott Vandehey in “Modern CSS in a Nutshell” wrote about his friend who hasn’t kept up with CSS since about 2015 and doesn’t really know what to learn. I’ll attempt to paraphrase Scott’s list and what’s changed since the days of CSS3.
Preprocessors are still widely used since the day of CSS3, but the reasons to use them have dwindled, so maybe don’t even bother. This includes more newfangled approaches like polyfilling future features. This also includes Autoprefixer. CSS-in-JS is common, but only on projects where the entire workflow is already in JavaScript. You’ll know when you’re on a relevant project and can learn the syntax then if you need to. You should learn Custom Properties, Flexbox, and Grid for sure.
Sounds about right to me. But allow me to make my own list of post-CSS3 goodies that expands upon that list a smidge.
What’s new since CSS3?
And by “CSS3” let’s say 2015 or so.
.card {
display: grid;
grid-template-columns:
150px 1fr;
gap: 1rem;
}
.card .nav {
display: flex;
gap: 0.5rem;
}Layout
You really gotta learn Flexbox and Grid if you haven’t — they are really cornerstones of CSS development these days. Even more so than any feature we got in CSS3.
Grid is extra powerful when you factor in subgrid and masonry, neither of which is reliable cross-browser yet but probably will be before too long.
html {
--bgColor: #70f1d9;
--font-size-base:
clamp(1.833rem, 2vw + 1rem, 3rem);
--font-size-lrg:
clamp(1.375rem, 2vw + 1rem, 2.25rem);
}
html.dark {
--bgColor: #2d283e;
}
CSS Custom Properties
Custom properties are also a big deal for several reasons. They can be your home for design tokens on your project, making a project easier to maintain and keep consistent. Color theming is a big use case, like dark mode.
You can go so far as designing entire sites using mostly custom properties. And along those lines, you can’t ignore Tailwind these days. The approach of styling an entire site with classes in HTML strikes the right chord with a lot of people (and the wrong chord with a lot of people, so no worries if it doesn’t jive with you).
@media
(prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001s !important;
}
}
@media
(prefers-color-scheme: dark) {
:root {
--bg: #222;
}
}
Preference Queries
Preference queries are generally @media queries like we’ve been using to respond to different browsers sizes for year, but now include ways to detect specific user preferences at the OS level. Two examples are prefers-reduced-motion and prefers-color-scheme. These allow us to build interfaces that more closely respect a user’s ideal experience. Read Una’s post.
.block {
background:
hsl(0 33% 53% / 0.5);
background:
rgb(255 0 0);
background:
/* can display colors
no other format can */
color(display-p3 0.9176 0.2003 0.1386)
background:
lab(52.2345% 40.1645 59.9971 / .5);}
background:
hwb(194 0% 0% / .5);
}Color Changes
The color syntax is moving to functions that accept alpha (transparency) without having the change the function name. For example, if you wanted pure blue in the CSS3 days, you might do rgb(0, 0, 255). Today, however, you can do it no-comma style (both work): rgb(0 0 255), and then add alpha without using a different function: rgb(0 0 255 / 0.5). Same exact situation for hsl(). Just a small nicety, and how future color functions will only work.
Speaking of future color syntaxes:
- P3 color or “display-p3” is coming via the
color()function. lab()color is another new color space. It “represents the entire range of color that humans can see.”lch()is another new color space.hwb()is another new color space for humans.
body {
font-family: 'Recursive', sans-serif;
font-weight: 950;
font-variation-settings: 'MONO' 1, 'CASL' 1;
}Variable Fonts
Web fonts became a big thing in CSS3. Now there are variable fonts. You might as well know they exist. They both unlock some cool design possibilities and can sometimes be good for performance (like no longer needing to load different font files for bold and italic versions of the same font, for example). There is a such thing as color fonts too, but I’d say they haven’t seen much popularity on the web, despite the support.
.cut-out {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}.mask {
mask: url(mask.png) right bottom / 100px repeat-y;
}.move-me {
offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
animation: move 3s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}Paths
SVG has also exploded since CSS3. You can
straight up crop any element into shapes viaclip-path, bringing SVG-like qualities to CSS. Not only that, but you can animate elements along paths, float elements along paths, and even update the paths of SVG elements.
These all feel kind of spirtually connected to me:
clip-path— allows us to literally crop elements into shapes.masks — similar to clipping, but a mask can have other qualities like being based on the alpha channel of the mask.offset-path— provides a path that an element can be placed on, generally for the purpose of animating it along that path.shape-outside— provides a path on a floated element that other elements wrap around.d— an SVG’sdattribute on a<path>can be updated via CSS.
.disable {
filter:
blur(1px)
grayscale(1);
}
.site-header {
backdrop-filter:
blur(10px);
}
.styled-quote {
mix-blend-mode:
exclusion;
} CSS Filters
There is a lot of image manipulation (not to mention other DOM elements) that is possible these days directly in CSS. There is quite literally filter, but its got friends and they all have different uses.
filter— all sorts of useful Photoshop-like effects like brightness, contrast, grayscale, sautration, etc. Blurring is a really unique power.background-blend-mode— again, evocative of Photoshop in how you can blend layers. Multiply the layers to darken and combine. Overlay to mix the background and color. Lighten and darken are classic effects that have real utility in web design, and you never know when a more esoteric lighting effect will create a cool look.backdrop-filter— the same abilities you have withfilter, but they only apply to the background and not the entire element. Blurring just the background is a particularly useful effect.mix-blend-mode— the same abilities you have withbackground-blend-mode, but for the entire element rather than bring limited to backgrounds.
import "https://unpkg.com/extra.css/confetti.js";body {
background: paint(extra-confetti);
height: 100vh;
margin: 0;
}Houdini
Houdini is really a collection of technologies that are all essentially based around extending CSS with JavaScript, or at least at the intersection of CSS and JavaScript.
- Paint API — returns an image that is built from
<canvas>APIs and can be controlled through custom properties. - Properties & Values API / Typed OM — gives types to values (e.g.
10px) that would have otherwise been strings. - Layout API — create your own
displayproperties. - Animation API
Combined, these make for some really awesome demos, though browser support is scattered. Part of the magic of Houdini is that it ships as Worklets that are pretty easy to import and use, so it has the potential to modularize powerful functionality while making it trivially easy to use.
my-component {
--bg: lightgreen;
}
:host(.dark) {
background: black;
}
my-component:part(foo) {
border-bottom: 2px solid black;
}Shadow DOM
The Shadow DOM comes up a bit if you’ve played with <svg> and the <use> element. The “cloned” element that comes through has a shadow DOM that has limitations on how you can select “through” it. Then, when you get into <web-components>, it’s the same ball of wax.
If you find yourself needing to style web components, know there are essentially four options from the “outside.” And you might be interested in knowing about native CSS modules and constructible stylesheets.
The CSS Working Group
It’s notable that the CSS working group has its own way of drawing lines in the sand year-to-year, noting where certain specs are at a given point in time:
These are pretty dense though. Sure, they’re great references and document things where we can see what’s changed since CSS3. But no way I’d send a casual front-end developer to these to choose what to learn.
Yeah — but what’s coming?
I’d say probably don’t worry about it. ;)
The point of this is catching up to useful things to know now since the CSS3 era. But if you’re curious about what the future of CSS holds in store…
- Container queries will be a huge deal. You’ll be able to make styling choices based on the size of a container element rather than the browser size alone. And it’s polyfillable today.
- Container units will be useful for sizing things based on the size of a container element.
- Independant transforms, e.g.
scale: 1.2;, will feel more logical to use than always having to usetransform. - Nesting is a feature that all CSS preprocessor have had forever and that developers clearly like using, particularly for media queries. It’s likely we’ll get it in native CSS soon.
- Scoping will be a way to tell a block of CSS to only apply to a certain area (the same way CSS-in-JS libraries do), and helps with the tricky concept of proximity.
- Cascade layers open up an entirely new concept of what styles “win” on elements. Styles on higher layers will beat styles on lower layers, regardless of specificity.
- Viewport units will greatly improve with the introduction of “relative” viewport lengths. The super useful ones will be
dvhanddvw, as they factor in the actual usable space in a browser window, preventing terrible issues like the browser UI overlapping a site’s UI.
Bramus Van Damme has a pretty good article covering these things and more in his “CSS in 2022” roundup. It looks like 2022 should be a real banner year for CSS. Perhaps more of a banner year than the CSS3 of 2015.
What should someone learn about CSS if they last boned up during CSS3? originally published on CSS-Tricks. You should get the newsletter and become a supporter.
from CSS-Tricks https://ift.tt/3Aei7ci
via IFTTT
No comments:
Post a Comment