Laten we Niet Vergeten Over de Container-Query ‘ s

0
11

Container-query ‘ s worden altijd op de top van de lijst van de gevraagde verbeteringen aan CSS. Het algemene sentiment is dat als we hadden container query ‘s, zouden we het niet schrijven als veel wereldwijde media-query’ s op basis van pagina-grootte. Dat is omdat we proberen om de controle over een meer bereik container, en de enige reden waarom we gebruik maken van media queries voor dat nu is, want het is het beste instrument dat we hebben in CSS. Ik ben het absoluut geloven dat.

Er is nog een sentiment dat gaat ongeveer eens in een tijdje dat er iets als: “u-ontwikkelaars denken dat je nodig hebt container query’ s, maar je echt niet.” Ik ben geen fan van dat. Het lijkt erg voor de hand dat we dat zouden doen goede dingen met hen als zij er waren, niet de minste daarvan is het schrijven van cleaner, draagbare, begrijpelijk code. Iedereen is het erover eens dat het gebouw UIs uit de onderdelen is de manier om te gaan deze dagen, waardoor de noodzaak voor container-query ‘ s alle de meer voor de hand.

Het is prachtig dat er moderne JavaScript ideeën die ons helpen doen ze gebruiken de dag van vandaag — maar dat betekent niet dat de technologie nodig hebben om daar te blijven. Het maakt veel meer zin in CSS.

Hier is mijn eind 2019 dacht dump op het onderwerp:

  • Philip Walton ‘ s “Responsive Componenten: een Oplossing voor de Container-Query ‘s Probleem” is een geweldige blik op het gebruik van JavaScript is ResizeObserver als een manier om het probleem op te lossen vandaag. Hij presteert geweldig en werkt overal. De demo site is de beste die er zijn, omdat het wijst op de noodzaak voor reagerende componenten (hoewel er zijn gedocumenteerde gevallen gebruik als het goed is). Philip zegt zelfs een pure CSS oplossing zou ideaal zijn.
  • CSS nesten was een beetje in de ronde van enthousiasme ongeveer een jaar geleden. Het gesprek maakt het lijkt alsof nesten is aannemelijk. Ik ben een voorstander van dit als een lange tijd fan van verstandige Sass nesten. Het maakt me af als de syntaxis voor container-query ‘ s kunnen maken gebruik van de zelfde soort van ding. Misschien geneste query ‘ s zijn toegesneden op de ouder kiezen? Of u laat u de media-en verliesrekening met een ampersand als de huidige spec doet met descendant selectors?
  • Andere voorgestelde syntaxis in het algemeen te betrekken wat het gebruik van de dikke darm, zoals .container:media(max-width: 400px) { }. Ik vind dat ook. Single-colon kiezers (pseduo kiezers) zijn filosofisch “selecteer het element dat onder deze omstandigheden” — zoals :hover, :nth-child, enz. — dus een media-bereik zinvol is.
  • Ik denk niet dat de syntaxis is de grootste vijand van deze functie; het is de voorstelling van hoe het wordt uitgevoerd. Laatst heb ik begrepen, zelfs niet in de prestaties zo veel als het weggooit met de hele rendering stroom van hoe browsers werken. Dat lijkt een enorme hindernis. Ik weet nog steeds niet wil vergeten. Er is veel innovatie gebeurt op het web en, gewoon omdat het niet duidelijk is hoe het te implementeren vandaag, dat betekent niet dat iemand niet bedenken een praktische weg naar voren morgen.