The Future of CSS

December 2014

@tabatkins, Tab Atkins.

Link to slides

image(): fallbacks to color and a bunch of other things

image-set(): Lets you specify multiple resolutions of an image, i.e. for retina

cross-fade: smoothly tweet between two images.

image-rendering: Lets browser understand how it should scale up images. Crisp edges! Oh baby!

flex-box(): Hey, you should be using it already! Basically, it destroys grids with all their terrible math. Yay!

Grid by Example, Rachel Andrew Grid, CSS-Tricks Solved by Flexbox, Philip Walton Flexbox, CSS-Tricks

:nth-child(), :matches(): Selecting children is getting smarter.

Variables: CSS will have them! They currently work in Firefox.

Colors: Spec There will be 4/8 fihiy hex colors for alpha instead of converting to rgba, and other fun stuff.

hwb(): hue-whiteness-blackness

gray():

grays without repeating yourself. Nice! No more bajillion $brand-gray-lights or whatever. language-gray(): grays without repeating yourself. Nice.

Media Queries: They're getting smarter! Ability to target phones used as night, or in bright light, or on e-ink screens. bada$$, amirite???

Animation!: Web Animations spec, Motion Path. Exposing CSS animations to JS in a more direct + easy way, and animations an element around the page in 2D with the motion property.

Polyfilling CSS: No language can grow forever. CSS is huge, and getting larger and larger. Cycle times to get new things into spec is really long (~5 years, yikes!). Doesn't mean we can't polyfill our solutions, though, such as with Media Queries, such as variables for media queries:

@custom-media foo (500px <= width <= 1200px);
      @media ("foo") { ... }
      CSS.customMedia.set("bar", true);
      CSS.customMedia.set("baz", 500);
      CSS.customMedia.set(
            "qux",
            MediaQueryList("(min-width: 500px)"))
      @media ("bar") { ... }
      @media ("baz" < 600) { ... }
      @media ("qux") { ... }
    

More Polyfilling: Custom psuedo-classes, custom functions, mix-ins (functions on the block level, rather than value level), custom at-rules, custom layout???