Kraštinių santykis - CSS-gudrybės

CSS nuosavybė aspect-ratioleidžia jums sukurti dėžės, kad išlaikyti proporcingus matmenis, kur heightir widthiš dėžutės apskaičiuojamos automatiškai kaip santykis. Tai šiek tiek matematikos y, bet idėja yra ta, kad šią nuosavybę galite padalyti vieną vertę iš kitos, o apskaičiuota vertė užtikrina, kad langelis išliks tokia proporcija.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioyra apibrėžta CSS dėžutės dydžio modulio 4 lygio specifikacijoje, kuri šiuo metu yra darbo projekte. Tai reiškia, kad jis vis dar vyksta ir turi galimybę pasikeisti. Tačiau, kai „Chrome“ ir „Firefox“ palaiko jį už eksperimentinės vėliavos, o „Safari Technology Preview“ 2021 m. Pradžioje jį palaikė, yra stiprių signalų, kurie aspect-ratioįgauna daug pagreitį.

Sintaksė

aspect-ratio: auto || ;

Paprasta anglų kalba: aspect-ratiolaikoma, kad autopagal numatytuosius nustatymus ji yra, arba priima reikšmę, kur .

• Pradinė vertė: auto
• Taikoma: visiems elementams, išskyrus įdėtas dėžutes ir vidines rubino ar stalo dėžutes
• Paveldima: ne
• Procentai: nėra
• Apskaičiuota vertė: nurodytas raktinis žodis arba skaičių pora
• Animacijos tipas: diskretiškas

Vertybės

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Jis veikia su pakeistu ir nepakeistu turiniu

Jei galvojate: „Uhm, taip, ar ne naršyklė tai daro mums dėl paveikslėlių?“ atsakymas yra: visiškai . Naršyklės atlieka keletą išgalvotų proporcijų skaičiavimų pakeistam turiniui, pvz., Vaizdams. Taigi, jei vaizdas, tarkime, yra 500 taškų pločio, naršyklė išplečia savo CSS išdėstymo algoritmus, kad išlaikytų vidinius arba „natūralius“ vaizdo matmenis. Ši aspect-ratiosavybė gali būti naudojama norint veiksmingai pakeisti tuos natūralius matmenis.

Bet nepakeistas turinys neturi natūralios proporcijos. Tai yra dauguma dalykų, su kuriais dirbame, pavyzdžiui, divai. Užuot bandęs išlaikyti natūralias elemento proporcijas, aspect-rationustato „pageidaujamą“ dydį.

Šiuo metu specifikacijoje pažymima, kad senesnėse CSS specifikacijose, ypač CSS 2.1, nėra aiškaus skirtumo tarp pakeisto ir nepakeisto turinio. Tai reiškia, kad galime pamatyti keletą papildomų specialių atvejų, kurie būtų papildyti specifikacija, kad padėtų juos išaiškinti. Kol kas matome, kad naršyklės palaiko pageidaujamų proporcijų nustatymą pakeičiant ir nepakeičiant atskirai, kur kai kurios naršyklės, turinčios išankstinį palaikymą už eksperimentinės vėliavos, gali palaikyti tik aspect-rationepakeistą turinį. Tikrai verta stebėti naršyklės palaikymą, kai ji vystosi.

Jis veikia savarankiškai nenurodydamas a widtharbaheight

Taigi, taip, mes galime tiesiog mesti jį ant tokio elemento:

.element ( aspect-ratio: 16 / 9; )

... ir numatytasis elemento elementas width: autonumanomas nustato elemento matmenis.

Ji pakeičia kai widtharba heightyra ant paties elemento

Tarkime, mes turime su pločio elementą 300pxir aspect-ratioiš 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Iš prigimties aspect-rationori pats apskaičiuoti elemento matmenis ir tai padarys remdamasis kontekstu, kuriame jis naudojamas. Bet tai widthmetant, nurodoma proporcija apskaičiuoti elemento proporcijos langelį naudojant 300pxplotį. Todėl tarsi ką tik parašėme:

.element ( height: 100px; width: 300px; )

Tai yra prasminga! Atminkite, kad nenurodžius widthar heightnenurodžius, naršyklė daro prielaidą, kad jie yra autoir eina iš ten. Kai mes pateikiame aiškias widthir heightvertybes, tai yra tai, kas įpranta.

Kai kuriose situacijose to nepaisoma

Čia viskas pasidaro šiek tiek linkusi į galvą, nes yra atvejų, kai į aspect-ratiotai nepastebima arba jo skaičiavimus veikia kitos savybės. Tai apima:

Kai tiek widthir heightyra paskelbta elemento

Mes ką tik pamatėme, kaip deklaravimas widtharba height, ir elementas paveiks skaičiavimą aspect-ratio. Bet jei elementas jau turi ir, widthir heightjie įpranta vietoj aspect-ratio. Tam reikia abiejų savybių, kad jos būtų nepaisomos aspect-ratio; nustatant bet kurį heightarba widthatskirai, elemento kraštinių santykis nebus nutrauktas.

Padaro senes, tiesa? Jei naudosite bet kurį widtharba heightverčiate aspect-rationaudoti tą vertę skaičiuojant, logiškai išplaukia, kad naudojant abu būtų visiškai nepaisoma aspect-ratio, nes abi vertės jau pateiktos ir nustatytos.

Kai turinys išsiskiria iš santykio

Paprasčiau tariant, jei turite elementą su formato santykiu ir turinys yra toks ilgas, kad priverčia elementą plėstis, tada elementas išsiplės. Jei elementas plečiasi, keičiasi jo matmenys ir daugiau nebėra kraštinių santykio. Štai kodėl specifikacija sako, kad ypatybė nustato „pageidaujamą“ kraštinių santykį. Tai pageidautina, bet nėra nustatyta.

Nepatinka, kaip tai veikia? Nustačius min-height: 0;elementą, turinys viršys pageidaujamą formato koeficientą, užuot jį išplėtęs.

Kai „praranda“ min-*ir max-*savybes

Mes tiesiog pamatėme, kaip tai veikia, tiesa? Kai turinys viršija laukelio matmenis, jo nebelieka, aspect-rationes dėžutė plečiasi kartu su turiniu. Mes galime tai nepaisyti min-width: 0.

Taip yra todėl , kad kare dėl „Box Model“ skaičiavimų visos min-*ir max-*savybės paprastai kovoja widthir heightuž viršenybę. Pavyzdžiui:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Bet:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Taip yra todėl, kad min-widtharba neleidžiama widthnukristi žemiau tam tikros vertės, arba jis yra ignoruojamas, nes widthelementas „set“ jau nustatė elementą, viršijantį jo minimalų plotį. Tas pats pasakytina ir min-height, max-widthir max-height.

Viso to esmė: jei mes nustatysime tiek a, min-*tiek max-*savybę tame pačiame elemente kaip aspect-ratioir jie „laimės“ widtharba height, tada jie bus nepaisomi aspect-ratio. Sakiau, kad tai buvo šiek tiek proto. ?

Naršyklės palaikymas

T.Y	Briauna	„Firefox“	„Chrome“	„Safari“	Opera
Ne	Ne	86 1.2,3	90 4	TP 5	Ne

„Android Chrome“	„Android Firefox“	„Android“ naršyklė	„iOS Safari“	„Opera Mobile“
Ne	Ne	Ne	Ne	Ne

Daugiau informacijos

Straipsnis apie 2020 m. Liepos 1 d

Pirmasis žvilgsnis į „kraštinių santykį“

Sara Cope