CSS Landscape | 2024 #1

Welcome to digest CSS Landscape! Explore the latest in WebKit for Safari 17.4 and Firefox 123.0.1. Delve into informative articles on fluid typography, UX tips, the Popover API, and more. Learn about invokers, anchor positioning, @starting-style, and styling CSS pseudo-elements with JavaScript. Discover Algorithmic Functional CSS and viewport-relative CSS units. Check out tutorials on modern tooltips, styling checkboxes, and printing CSS. Don’t miss the video on CSS content selection. Stay tuned!

News

Articles

Retrofitting Fluid Typography

March 1, 2024 / Richard Rutter

The article showcases how Utopian fluid typography can be implemented to enhance an existing website’s responsiveness with minimal code.

CSS Tips to Avoid Bad UX

March 3, 2024 / Stas Melnikov

This article provides actionable CSS techniques to prevent common UX pitfalls. Learn about alternatives to outdated practices, accessibility considerations, and more.

Menus, Toasts and More with the Popover API, the Dialog Element, Invokers, Anchor Positioning and @starting-style

March 4, 2024 / Ollie Williams

This article explores the use of CSS’s popover attribute and dialog element for crafting interactive UI components like dropdowns and toasts.

Styling a CSS Pseudo-Element with JavaScript

March 5, 2024 / Cassidy Williams

This article demonstrates how to style CSS pseudo-elements using JavaScript by leveraging CSS variables. Explore dynamic adjustments to pseudo-element styles with practical examples.

Algorithmic Functional CSS

March 5, 2024 / Nathan Knowler

Discover the concept of “Algorithmic Functional CSS” and how it enhances traditional utility classes by adapting styles dynamically based on context.

Learn These Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh)

March 5, 2024 / George Martsoukos

Explore challenges with classic viewport units and discover modern CSS alternatives for full-screen sections.

Tutorials

Modern CSS Tooltips And Speech Bubbles (Part 1)

March 1, 2024 / Temani Afif

Learn how to create modern and customizable CSS tooltips using innovative techniques with this comprehensive guide.

Styling Checkboxes and Switches

March 2, 2024 / Mads Stoumann

Discover a detailed guide on styling checkboxes and switches for better scalability and adaptability to dark mode.

CSS for Printing to Paper

March 3, 2024

Control how webpages appear when printed with this guide covering CSS techniques for printing to paper.

Video

Thank you for reading the CSS Landscape!