Modern CSS: :has, container queries, colour spaces
You use new CSS features such as the :has selector, container units, new colour functions, logical properties and anchor positioning, together with fallbacks for older browsers.
Level 401 · 14 lessons · 12 practice labs
Lessons
Selectors and logic
- Selecting parents with :has
- Controlling specificity with :is and :where
- Feature queries with @supports
- Short task: a form that reacts to its state with CSS only
Layout and placement
- Container units and style queries
- Logical properties and right-to-left languages
- Pop-ups with anchor positioning
- Styling popover and dialog
- Short task: adapt a page to a right-to-left language
Colour and type
- Colour with oklch and color-mix
- Deriving a palette with relative colour syntax
- Variable fonts and text-wrap
- Progressive enhancement and fallbacks
- Capstone: refresh an old interface with modern CSS
Practice labs
- Select a parent with :has: Use :has to give cards that contain an image a different layout.
- Write a form that reacts to its state: Handle a fieldset with an invalid field and a section revealed by a checkbox with CSS alone.
- Reset specificity with :where: Wrap a library's base styles in :where so user styles override easily, and show the contrast with :is.
- Write a fallback with @supports: Build a page that falls back to Flexbox when Grid isn't supported.
- Apply progressive enhancement: Test that a page using new colour and layout features stays usable in older browsers.
- Refresh an old interface with modern CSS: Rewrite an old table-based admin panel with :has, container queries and modern colours.
- Convert physical properties to logical: Convert margin-left and padding-right to logical forms such as margin-inline-start.
- Adapt a page to a right-to-left language: In the Arabic version icons, arrows and alignment are wrong; fix them with dir and logical properties.
- Scale type with container units: Scale in-component headings with cqi units and react to a theme change with a style query.
- Build a pop-up with popover: Open and close a help tip with the popover attribute and no JavaScript.
- Anchor a tooltip to a button: Use anchor positioning to place a tooltip above a button and let it flip at the screen edge.
- Restyle a dialog from scratch: Build a confirmation dialog with dialog, add ::backdrop and enter-exit animations and test focus behaviour.
About this course
You use new CSS features such as the :has selector, container units, new colour functions, logical properties and anchor positioning, together with fallbacks for older browsers.
What you will learn
- Selectors and logic
- Layout and placement
- Colour and type
Prerequisites
You should have practised the topics of the same path up to level 301.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 401; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.