Una Kravets - The Best JavaScript is No JavaScript

Master CSS features and techniques for creating sophisticated web layouts without JavaScript. Explore CSS grid functions, container queries, advanced selectors, and scroll-driven animations.

Key takeaways
  • CSS Grid Functions: CSS grid now includes new functions like repeat, autofill, and minmax, which provide more flexibility and control over grid layouts.

  • Math Functions: CSS now offers a range of math functions, including sin(), cos(), and clamp(), enabling developers to perform mathematical calculations within their stylesheets.

  • Container Queries: Container queries allow developers to style elements based on the size or dimensions of their parent containers, providing more responsive and adaptive layouts.

  • Advanced Selectors: CSS has introduced advanced selectors like :has() and :not(), which enable developers to target elements based on the presence or absence of specific child elements or properties.

  • Logical Properties: Logical properties, such as margin-inline-start and margin-inline-end, allow developers to style elements based on their logical position in the layout, regardless of the directionality of the text.

  • Anchor Positioning: Anchor positioning enables developers to position elements relative to other elements on the page, providing more precise and flexible positioning options.

  • Popover and Select Menu Components: CSS now includes built-in components like popover and select menu, which provide accessible and customizable dropdown menus and dialog boxes.

  • Scroll-Driven Animations: Developers can create smooth and interactive scroll-driven animations using CSS, eliminating the need for JavaScript in many cases.

  • Functional CSS: Functional CSS involves writing CSS in a more declarative and modular manner, separating styling logic from application logic and making it easier to maintain and reuse styles.

  • Typing CSS with Custom Properties: Custom properties can be used to define and reuse CSS values, enabling developers to type-check their CSS and ensure consistency across their stylesheets.