modern-csslisted
Install: claude install-skill abdul977/muahib-skills
# Modern CSS
This skill provides a reference for writing modern, robust, and efficient CSS.
---
## Layout & Responsive Design
### Container Queries
```css
.card {
container: --my-card / inline-size;
}
@container --my-card (width < 40ch) {
/* Component-based responsive design */
}
@container (20ch < width < 50ch) {
/* Range syntax */
}
```
**Container units:** `cqi`, `cqb`, `cqw`, `cqh` - size relative to container dimensions
**Anchored container queries:** Style positioned elements based on anchor fallback state
```css
.tooltip {
container-type: anchored;
}
@container anchored(top) {
/* Styles when positioned at top */
}
```
### Media Query Range Syntax
```css
@media (width <= 1024px) { }
@media (360px < width < 1024px) { }
```
### Grid Enhancements
- **Subgrid:** Inherit parent grid lines for nested layouts
- **Masonry:** `display: grid-lanes` for Pinterest-style layouts with logical tab order. (Previously proposed as `grid-template-rows: masonry`).
---
## Color & Theming
### Color Scheme & Light-Dark Function
```css
:root {
color-scheme: light dark;
--surface-1: light-dark(white, #222);
--text-1: light-dark(#222, #fff);
}
```
### Modern Color Spaces
```css
/* OKLCH: uniform brightness, P3+ colors */
.vibrant {
background: oklch(72% 75% 330);
}
/* Display-P3 for HDR displays */
@media (dynamic-range: high) {
.neon {
--neon-red: color(display-p3 1 0 0);
}
}
/* Better gradients with in oklch */
.gradient {
background: linear-gradie