Smashing Magazine·2yCombining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine
Learn how to use the :has() pseudo-class in CSS to apply conditional styling based on a selected option in a <select> element. This technique allows for styling not only the selected element, but also its parent and even further up the chain. Practical use cases include styling mandatory <select> elements and creating style variations of components.
Smashing Magazine·2yModern CSS Layouts: You Might Not Need A Framework For That — Smashing Magazine
This post explores how to create modern CSS layouts without the need for a framework. It introduces four CSS classes for different layout approaches, including fluid layouts and repeating layouts. The article also covers the use of cascade layers and CSS variables for greater control over the layouts.
Smashing Magazine·2yBeyond CSS Media Queries — Smashing Magazine
Media queries have limitations in terms of viewport focus, difficulty in management, and lack of responsiveness. Flexbox and Grid are alternative options for responsive design. Container queries allow for context-aware responsive layouts.
Smashing Magazine·2yDecision Trees For UI Components — Smashing Magazine
Design teams can use decision trees for UI components to avoid never-ending discussions, confusion, and misunderstanding. Examples of decision trees for UI components are provided by Doctolib, Workday, Lyft, NewsKit, and Nucleus.