Resources for CSS is Awesome

Link dump for a tech talk I gave at DeepL.

The Foundation

• Cascade Layers

  • https://css-irl.info/a-handy-use-for-cascade-layers/
  • https://css-tricks.com/css-cascade-layers/

• Container Queries

  • https://css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out/
  • https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/
  • https://ishadeed.com/article/css-container-style-queries/

• CSS Nesting

  • https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/

• :has

  • https://www.bram.us/2023/01/12/sibling-scopes-in-css-thanks-to-has/?utm_source=pocket_saves
  • https://www.bram.us/2022/12/14/a-nth-childanb-of-s-polyfill-thanks-to-css-has/
  • https://css-tricks.com/solved-with-has-vertical-spacing-in-long-form-text/
  • https://codepen.io/jh3y/pen/JjvapBM
  • https://css-irl.info/animated-grid-tracks-with-has/

• :where

• :is

• Colour syntax

  • https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
  • https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
  • https://chriscoyier.net/2023/01/26/relative-color-syntax-plzzzzz/
  • https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems
  • https://codepen.io/argyleink/pen/RwyOyeq

• Grid & Subgrid

  • https://css-irl.info/masonry-in-css/

The Tools

• @supports
  • https://css-irl.info/detecting-css-selector-support/
• @media queries
  • https://www.matuzo.at/blog/2022/100daysof-day57/
  • https://www.smashingmagazine.com/2022/03/guide-hover-pointer-media-queries/
• Custom Properties
  • https://nerdy.dev/custom-prop-categories
  • CSS Variable Secrets | Lea Verou | CSS Day 2022
• logical properties / writing modes
  • https://adrianroselli.com/2019/11/css-logical-properties.html
• aspect-ratio
  • https://jakearchibald.com/2022/img-aspect-ratio/
• inset
• New Viewport Units
• accent-color
  • https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/

Performance

• content-visibility
  • https://web.dev/content-visibility/
  • https://www.youtube.com/watch?v=FFA-v-CIxJQ
• contain
  • https://css-tricks.com/when-is-it-right-to-reach-for-contain-and-will-change-in-css/
  • https://techaffinity.com/blog/css-contain-property-to-optimize-browsers/

Future

• View Transition API

  • https://12daysofweb.dev/2022/view-transitions-api/
  • https://developer.chrome.com/docs/web-platform/view-transitions/

• CSS Speech

  • https://tink.uk/why-we-need-css-speech/
  • https://www.tpgi.com/screen-readers-support-for-text-level-html-semantics/

• display visually-hidden

  • https://www.tpgi.com/the-anatomy-of-visually-hidden/

• https://chriscoyier.net/2022/12/21/things-css-could-still-use-heading-into-2023/

• https://meyerweb.com/eric/thoughts/2023/02/08/css-wish-list-2023/

• Interop 2023 https://css-irl.info/interop-2023/

Conclusion

• https://css-tricks.com/is-there-too-much-css-now/

Resources

• https://alistapart.com/article/dao/
• https://frankchimero.com/blog/2015/the-webs-grain/
• https://www.zeldman.com/2014/06/10/the-color-purple/
• https://www.matuzo.at/blog/2022/100-days-of-more-or-less-modern-css/
• https://ishadeed.com/article/conditional-css/
• What's new in responsive design by Rachel Andrew 
• Nordic.js 2019 • Rachel Andrew - Refactoring (the way we talk about) CSS 
• https://www.netlify.com/blog/fun-parallax-scrolling-css-for-matterday/
• https://www.joshwcomeau.com/css/understanding-layout-algorithms/