CSS bliver forbandet svin vildt, I Tell Ya What

Tidsstempel: 13. oktober 2021 kl. 11
Kildeknude: 1877868

Da nogen bare sidder tilbage og ser CSS udvikle sig, føles det som om, vi er ved et af de hotteste innovationsøjeblikke i CSS-historien. Det var virkelig noget, da vi fik flexbox på tværs af alle browsere, og ikke voldsomt længe efter, gitter. De ændrede spillet fra at CSS føltes som en akavet samling af tricks til noget mere fornuftigt og af tiden.

Den følelse bliver hele tiden mere og mere sand. Lige inden for det sidste korte stykke tid er her en liste over ting, der sker.

⚠️🤷 Syntaksen er muligvis ikke nøjagtig som nogen af ​​uddragene under dette, når de sendes for alvor. 🤷⚠️

Native Nesting

Native Nesting er blevet en Første offentlige arbejdsudkast, hvilket betyder, at det er meget tættere på at blive en rigtig ting end nogensinde før. Mange mennesker bruger præprocessorer kun for at gøre det lettere at indlejre, og dette burde være nyttigt for dem, der ønsker at forenkle deres byggeværktøjer for at undgå det.

Jeg kan især godt lide, hvordan du kan rede betingede regler. 

.card { & .title { } & .body { } @media (min-inline-size > 1000px) { & { } } @nest body.dark & { }
}

Jeg har hørt hvisken om, at dette også er en brugbar idé, som undgår at kræve & på simple vælgere og undgår også @nest overhovedet.

.card {{ .title { } .body { } body.dark & { }
}}

Containerforespørgsler

Containerforespørgsler er kun et redaktørudkast (CSS-indeslutningsmodul niveau 3) i øjeblikket, men de har allerede en implementering i Chrome (med et flag). Disse er et kæmpe tilbud, da de giver os mulighed for at træffe stylingbeslutninger baseret på størrelsen på selve beholderen, hvilket i nutidens komponentdrevne verden bare er en absolut god idé.

Se koden en simpelt eksempelsted (kan se mærkeligt ud, hvis du ikke har flaget på i Chrome).

/* Set containment on the parent you're querying */
.card-container { /* Both work right now, not sure which is right */ contain: style layout inline-size; container: inline-size;
}
.card { display: flex;
}
@container (max-width: 500px) { /* Must style a child, not the container */ .card { flex-direction: column; }
}

Containerenheder

Containerenheder have et udkast til spec også, hvilket for mig næsten fordobler nytten af ​​containerforespørgsler. Tanken er, at du har en enhed, der er baseret på størrelsen af ​​beholderen (bredde, højde eller "inline-size" / "block-size"). Jeg forestiller mig qi enhed er den mest nyttige.

Forhåbentlig snart vil vi skrive container-scoped CSS, der stiler sig selv baseret på størrelsen af ​​sig selv og kan overføre denne størrelse til andre egenskaber til brug indeni. Det font-size egenskab er et nemt eksempel på, hvor nyttigt dette er (skrifttyper, der skaleres i størrelse baseret på deres container), men jeg er sikker på, at containerenheder vil blive brugt til alle mulige ting, som f.eks. gap, padding, og hvem ved hvad alt andet.

/* Set containment on the parent you're querying */
.card-container { /* Both work right now, not sure which is right */ contain: style layout inline-size; container: inline-size;
}
.card h2 { font-size: 1.5rem; /* fallback */
}
@container type(inline-size) { .card h2 { font-size: clamp(14px, 1rem + 2qi, 56px) }
}

Kaskade lag

Kaskade lag (i Arbejdsudkast spec) introducerer et helt nyt paradigme, for hvilket CSS-vælgere vinder i Cascade. Lige nu er det mest en specificitetskonkurrence. Vælgere med den højeste specificitet vinder og taber kun til inline-stile og specifikke regler med !important klausuler. Men med lag ville enhver matchende vælger på et højere lag vinde. 

@layer base; @layer theme; @layer utilities; /* Reset styles with no layer (super low) */
* { box-sizing: border-box; } @layer theme { .card { background: var(--card-bg); }
} @layer base { /* Most styles? */
} @layer utilities { .no-margin { margin: 0; }
}

@hvornår

Tab Atkins' forslag for CSS When/Else Rules har været accepteret og er en måde at udtrykke sig på @media , @supports forespørgsler på en sådan måde, at du meget lettere kan udtrykke else betingelser. Mens medieforespørgsler allerede har en vis evne til lave logik, at lave gensidigt eksklusive forespørgsler har længe været svært at udtrykke, og det gør det meget enkelt.

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */
} @else { /* C */
}

Anvendelsesområde

Ideen om Omfangede stilarter (denne er et redaktørudkast) er, at det giver en syntaks til at skrive en blok af stilarter, der kun gælder for en bestemt vælger og inden for, men som også har mulighed for at stoppe omfanget, hvilket skaber en scope donut.

Min yndlingsdel af alt dette er "nærhedsstyrken". Miriam forklarer sådan:

.light-theme a { color: purple; }
.dark-theme a { color: plum; }
<div class="dark-theme"> <a href="#">plum</a> <div class="light-theme"> <a href="#">also plum???</a> </div>
</div>

God pointe ikke?! Der er ingen god måde at udtrykke, at du vil have nærheden af ​​det link til .light-theme at vinde. Lige nu er det faktum, at specificiteten af ​​begge temaer er den samme, men .dark-theme kommer efter - så den vinder. Forhåbentlig hjælper scoped styles også med denne vinkel.

@scope (.card) to (.content) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... }
}
/* Proximity help! */
@scope (.light-theme) { a { color: purple; }
} @scope (.dark-theme) { a { color: plum; }
}

Du kan ikke bruge noget på denne liste lige nu på dine produktionswebsteder. Efter alle disse år at have forsøgt at følge denne slags ting, forbliver jeg uvidende om, hvordan det hele i sidste ende går. Jeg tror, ​​at specifikationerne skal færdiggøres og aftales først. Så samler browsere dem op, forhåbentlig mere end én. Og når de har det, så tror jeg, at specifikationerne kan afsluttes?

Det ved jeg ikke. Måske vil noget af det dø. Måske vil noget af det ske super hurtigt, og noget super langsomt. Sandsynligvis vil noget af det falde i nogle browsere, men ikke andre. Hej, vi har i det mindste stedsegrønne browsere nu, så når tingene falder, sker det hurtigt. Jeg føler, at vi lige nu er i en fase, hvor de fleste af de største og bedste CSS-funktioner understøttes på tværs af alle browsere, men med alt dette, vil vi være på vej ind i en fase, hvor support til det nyeste og bedste vil være meget mere plettet.

Kilde: https://css-tricks.com/css-is-going-gosh-darned-hog-wild-i-tell-ya-what/

Tidsstempel:

Mere fra CSS-tricks