La oss Ikke Glemme Container Søk

0
5

Beholder spørsmål er alltid på toppen av listen over bedt om forbedringer til CSS. Den generelle oppfatningen er at hvis vi hadde container spørsmål, vi ville ikke skrive så mange globale medier spørringer basert på sidestørrelse. Det er fordi vi faktisk prøver å styre en mer omfattet beholderen, og den eneste grunnen til at vi bruker media queries for at det nå er fordi det er det beste verktøyet vi har i CSS. Jeg absolutt tro det.

Det er en annen følelse som går rundt en gang i en stund som går noe sånt som: “du utviklere tror du trenger container spørsmål, men du virkelig ikke.” Jeg er ikke en fan av det. Det virker veldig klart at vi ville gjøre gode ting med dem hvis de var tilgjengelig, ikke minst som skriver renere, bærbare, forståelig kode. Alle synes å være enige om at bygningen UIs fra komponenter er veien å gå i disse dager, noe som gjør behovet for container-spørringer alle de mer åpenbare.

Det er flott at det er moderne JavaScript ideer som hjelper oss med å gjøre bruk av dem i dag — men det betyr ikke at teknologien trenger for å bo der. Det gjør det mer fornuftig måte i CSS.

Her er mitt slutten av 2019 trodde dump om emnet:

  • Philip waltons “Responsive Komponenter: en Løsning på Beholderen Spørringer Problem” er et flott utseende ved hjelp av JavaScript er ResizeObserver som en måte å løse problemet i dag. Den utfører store og fungerer hvor som helst. Den demo-site er den beste ut av det fordi det understreker behovet for responsive komponenter (selv om det er andre dokumenterte tilfeller også). Philip selv sier en ren CSS-løsning vil være mer ideelt.
  • CSS-hekkende fikk en liten runde med entusiasme om for et år siden. Samtalen gjør det virke som hekker er plausibel. Jeg er i favor av dette som en lang tid fan av fornuftig Sass hekkende. Det gjør meg lurer på om syntaksen for container forespørsler kan utnytte samme slags ting. Kanskje neste spørsmål er omfattet til den overordnede selector? Eller du prefiks media uttalelse med en tegnet som gjeldende spec gjør med etterkommer velgere?
  • Andre foreslåtte syntaxes generelt innebære bruk av kolon, som .beholder:media(maks bredde: 400px) { }. Jeg liker det også. Enkelt-kolon-velgere (pseduo velgere) er filosofisk “velg element under disse forholdene” — som :hover, :nth-child, etc. — så en media omfang fornuftig.
  • Jeg tror ikke syntaksen er den største fienden av denne funksjonen; det er den ytelse av hvordan den er implementert. Sist jeg har forstått, det er ikke engang ytelse så mye som det mucks med hele gjengivelse flyt av hvordan fungerer nettlesere. Det virker som en massiv hinder. Jeg har fortsatt ikke vil glemme det. Det er massevis av innovasjon skjer på nettet og, bare fordi det er ikke klart hvordan å implementere det i dag, det betyr ikke at noen ikke vil finne en praktisk vei fremover i morgen.