insetCSS nuosavybė yra sutrumpinimas iš keturių vidiniais savybių, top, right, bottomir leftvienoje deklaracijoje. Kaip ir pačios keturios atskiros savybės, insetneturi įtakos nejudantiems (statiniams) elementams. Kitaip tariant, elementas turi deklaruoti aiškią positionvertę, kad įsigaliotų įterptinės savybės.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset iš pradžių apibrėžta CSS loginių ypatybių ir vertybių 1 lygio specifikacijoje, kuri yra redaktoriaus juodraštyje nuo 2020 m. balandžio 20 d.
Sintaksė
Kaip jau supratote iš aukščiau pateikto pavyzdžio, insetvadovaukitės ta pačia daugiavertine sintakse paddingir margin. Tai reiškia, kad ji pripažįsta tiek, kiek keturių verčių (deklaruoti kompensacijas už top, right, bottomir left) ir vos viena reikšme (deklaruoti lygiomis kompensuoti visų keturių savybių). Ir, kaip paddingir margin, vertės teka pagal laikrodžio rodyklę, pradedant nuo top.
.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )Anksčiau insetturėjome deklaruoti kiekvieną insetsub-nuosavybę atskirai, taip:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Dabar galime tiesiog tai padaryti vienoje CSS eilutėje:
.box ( position: absolute; inset: 0; /* ? */ )Vertybės
insetNuosavybė priima skaitines vertes kaip viršuje, dešinėje, apačioje ir kairėje. Šios vertybės gali būti bet koks CSS ilgis, pavyzdžiui px, em, remir %, be kita ko.
Pakalbėkime apie logines savybes
Čia mes tiesiog subraižysime loginių savybių paviršių, nes realus dėmesys skiriamas insetir su juo susijusios sub savybės. Išsamiai įsigilinkite į temą šiame Rachel Andrew žurnalo „Smashing Magazine“ straipsnyje.
Yra daugiau insetsub-savybės kaip top, right, bottomir left, bet tam, kad juos suprasti, tai verta susipažinti su loginių savybių ir vertybių.
Turinys gali būti rodomas skirtingomis kryptimis (ty rašymo režimais), įskaitant kairę į dešinę, iš dešinės į kairę, iš viršaus į apačią ir iš apačios į viršų. Kalbėdami apie „logiškas“ sąvokas, mes iš tikrųjų remiamės pradiniu tašku, atsižvelgdami į turinio rašymo kryptį.
Įsivaizduokite, kad kuriate svetainę, kurioje turi būti palaikomos kalbos iš kairės į dešinę (LTR), pvz., Anglų ir ispanų, ir iš dešinės į kairę (RTL), pvz., Persų ar arabų. Tarkime, kad norite pridėti paraštę tarp piktogramos ir eilutės teksto šalia jos.
Natūralu, kad galite pasiekti, kad margin-rightnuosavybė palaikytų LTR, tada pridėkite kitą taisyklių rinkinį, kuris pašalina tą maržą ir pakeičia margin-leftRTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Tai maža puslapio dalis. Dabar įsivaizduokite, kad tokiu būdu sukursite didelę svetainę - tai daug darbo! Tačiau loginės savybės leidžia tai padaryti greitai, atsižvelgiant į rašymo režimą. Pvz., Elemento pabaigoje galime pridėti maržą, kad ir kaip būtų:
.icon ( margin-inline-end: 1em; )
Tai mes turime omenyje turėdami omenyje logines savybes - jos yra susijusios su rašymo režimu, o ne su fizine kryptimi. Pažiūrėkite, kaip logiškesnės savybės yra daug logiškesnės dirbti?
Loginių savybių įvedimas
Taigi, žinodami, ką dabar žinote apie logines savybes, pateikiamos keturios papildomos įterptinės sub-ypatybės:
| Loginė nuosavybė | Horizontalaus srauto ekvivalentas | Ką tai daro |
|---|---|---|
inset-block-start | top | Nurodo pradinio krašto poslinkį statmenai rašymo krypčiai. |
inset-block-end | bottom | Nurodo galinio krašto poslinkį statmenai rašymo krypčiai. |
inset-inline-start | left | Nurodo pradžios krašto poslinkį rašymo kryptimi, kuris priskiriamas fiziniam poslinkiui, atsižvelgiant į elemento rašymo režimą, kryptį ir teksto orientaciją. |
inset-inline-end | right | Nurodo pabaigos krašto poslinkį rašymo kryptimi. |
Mes netgi galime sugrupuoti tas keturias sub-ypatybes į dvi papildomas trumpinių savybes:
| Loginė nuosavybė | Stenografija | Ką tai daro |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Priima vieną reikšmę, kad būtų galima nustatyti inset-inline-startir inset-inline-end.Taip pat priima dvi reikšmes, kur pirmoji nurodo, inset-inline-starto antroji nurodo inset-inline-end. |
inset-block | inset-block-startinset-block-end | Priima vieną reikšmę, kad būtų galima nustatyti ir inset-block-start, ir inset-block-end.Taip pat priima dvi reikšmes, kur pirmoji nurodo, inset-block-starto antroji nurodo inset-block-end. |
Demonstracija
Pakeiskite įterptųjų ypatybių rašymo režimą ir vertes, kad geriau suprastumėte, kaip jie veikia:
Aukštyn: insetnuosavybė nėra logiška
Nors insettai yra „Logical Properties and Values“ specifikacijos dalis, ji neapibrėžia loginių blokų ar įterptųjų poslinkių. Vietoj to, jis apibrėžia fizinius poslinkius, neatsižvelgiant į elemento rašymo režimą, kryptį ir teksto orientaciją. Kitaip tariant, insetyra tik sutrumpinimas top, right, bottomir left.
Čia „GitHub“ yra tam tikra diskusija dėl kai kurių raktinių žodžių naudojimo, kad būtų galima logiškai naudoti šią nuosavybę.
Taigi, ar vis dar naudojame fizinius atskaitymus? Įsivaizduokite, kad norite ženklelio ar logotipo pritvirtinti viršutiniame ir kairiajame puslapio kampe ir, kad ir kokia būtų jo kalba, norite, kad jis būtų ten. Tokiu atveju negalite naudoti loginių poslinkių, o vietoj to turėsite pasitelkti fizines savybes.
Naršyklės palaikymas
Parama insetturtui dar tik ankstyvoje stadijoje. Šiuo metu Caniuse mano, kad pasaulinė parama yra tik 3,79%.
Darbalaukis
| Internet Explorer | Briauna | „Firefox“ | „Chrome“ | „Safari“ | Opera |
|---|---|---|---|---|---|
| Ne | Ne | 66+ | Ne | Ne | Ne |
Mobilusis
| „iOS Safari“ | „Opera Mini“ | „Android“ naršyklė | „Chrome“ „Android“ | „Firefox Android“ |
|---|---|---|---|---|
| Ne | Ne | 68 | Ne | Ne |
Daugiau informacijos
- CSS loginių ypatybių ir reikšmių 1 lygis (specifikacija, redaktoriaus juodraštis)
- Loginių savybių ir vertybių supratimas (žurnalas „Smashing“)
- CSS loginės savybės (CSS-gudrybės)