insetĪpašums CSS ir saīsinājums no četriem ielikt īpašībām, top, right, bottomun leftvienā deklarācijā. Tāpat kā pašiem četriem individuālajiem īpašumiem, insettas neietekmē nenovietotos (statiskos) elementus. Citiem vārdiem sakot, elementam ir jādeklarē precīzi norādīta positionvērtība, pirms iestrādājas ieliktnes.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset sākotnēji ir definēts CSS loģisko īpašību un vērtību 1. līmeņa specifikācijā, kas ir redaktora melnrakstā no 2020. gada 20. aprīļa.
Sintakse
Kā jūs, iespējams, esat apkopojis no iepriekš minētā piemēra, insetievērojiet to pašu daudzvērtīgo sintaksi paddingun margin. Tas nozīmē, ka tā uzņemas tik daudz kā četras vērtības (deklarēt kompensāciju par top, right, bottomun left), un tik maz kā vienu vērtību (deklarēt vienādu kompensāciju par visiem četriem īpašumiem). Un, tāpat kā paddingun margin, vērtības plūst pulksteņrādītāja virzienā, sākot ar 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 */ )Pirms tam insetmums katrs apakšīpašums ir jādeklarē insetatsevišķi, šādi:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Tagad mēs vienkārši varam to izdarīt vienā CSS rindiņā:
.box ( position: absolute; inset: 0; /* ? */ )Vērtības
insetĪpašums piekrīt skaitliskās vērtības, tāpat kā augšējā, labajā, apakšējā un pa kreisi. Šīs vērtības var būt jebkurš derīgs CSS garuma, piemēram px, em, remun %, cita starpā.
Parunāsim par loģiskajām īpašībām
Mēs vienkārši šeit saskrāpēsim loģisko īpašību virsmu, jo patiesā uzmanība tiek pievērsta insetun ar to saistītās apakšīpašības. Iegūstiet padziļinātu padziļinātu informāciju par šo tēmu šajā Rachelas Endrjū rakstā Smashing Magazine.
Ir vairāki insetsub-īpašības nekā top, right, bottomun lefttomēr, lai saprastu to, ir vērts iepazīties ar loģiskās īpašībām un vērtībām.
Saturu var attēlot dažādos virzienos (ti, rakstīšanas režīmos), tostarp no kreisās uz labo, no labās uz kreiso, no augšas uz leju un no apakšas uz augšu. Runājot par “loģiskiem” jēdzieniem, mēs patiešām atsaucamies uz sākuma punktu, pamatojoties uz satura rakstīšanas virzienu.
Iedomājieties, ka veidojat vietni, kurai jāatbalsta gan no kreisās uz labo (LTR) valodas, piemēram, angļu un spāņu, gan no labās uz kreiso (RTL) valodas, piemēram, persiešu vai arābu. Pieņemsim, ka vēlaties pievienot piemali starp ikonu un līnijas tekstu blakus tai.
Protams, jūs varat sasniegt margin-rightīpašumu, lai atbalstītu LTR, pēc tam pievienojiet citu kārtulu kopu, kas noņem šo rezervi un aizstāj ar margin-leftRTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Šī ir neliela lapas daļa. Tagad iedomājieties šādā veidā izveidot lielu vietni - tas ir daudz darba! Bet loģiskās īpašības padara to vienkāršu, ņemot vērā rakstīšanas režīmu. Piemēram, elementa beigās mēs varam pievienot rezervi visur, kur tas notiek:
.icon ( margin-inline-end: 1em; )
Tas ir tas, ko mēs domājam, atsaucoties uz loģiskajām īpašībām - tie ir salīdzinoši ar rakstīšanas režīmu, nevis fizisko virzienu. Redziet, kā loģiskās īpašības ir daudz loģiskākas darbam?
Ievietot loģiskās īpašības
Tātad, zinot, ko jūs tagad zināt par loģiskajām īpašībām, šeit ir četras papildu ieliktnes apakšīpašības:
| Loģiskais īpašums | Horizontālās plūsmas ekvivalents | Ko tas dara |
|---|---|---|
inset-block-start | top | Norāda sākuma malas nobīdi virzienā, kas ir perpendikulārs rakstīšanas virzienam. |
inset-block-end | bottom | Norāda nobeiguma malas nobīdi virzienā, kas ir perpendikulārs rakstīšanas virzienam. |
inset-inline-start | left | Norāda sākuma malas nobīdi rakstīšanas virzienā, kas kartē fizisko nobīdi atkarībā no elementa rakstīšanas režīma, virziena un teksta orientācijas. |
inset-inline-end | right | Norāda nobeiguma malas nobīdi rakstīšanas virzienā. |
Mēs pat varam sagrupēt šīs četras apakšīpašības divās papildu stenogrāfijas īpašībās:
| Loģiskais īpašums | Īsums par | Ko tas dara |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Pieņem vienu vērtību kopumu gan inset-inline-startun inset-inline-end.Pieņem arī divas vērtības, kur pirmā norāda, inset-inline-startbet otrā - inset-inline-end. |
inset-block | inset-block-startinset-block-end | Pieņem vienu vērtību, lai iestatītu gan inset-block-start, gan inset-block-end.Pieņem arī divas vērtības, kur pirmā norāda, inset-block-startbet otrā - inset-block-end. |
Demonstrācija
Mainiet ieliktņu rekvizītu rakstīšanas režīmu un vērtības, lai iegūtu labāku priekšstatu par to darbību:
Heads up: insetĪpašums nav loģisks
Lai gan tā insetir daļa no loģisko rekvizītu un vērtību specifikācijas, tā nenosaka loģisko bloku vai iekšējo nobīdi. Tā vietā tas nosaka fiziskos nobīdes neatkarīgi no elementa rakstīšanas režīma, virziena un teksta orientācijas. Citiem vārdiem sakot, insetir tikai saīsinājums top, right, bottomun left.
Šeit GitHub ir dažas diskusijas par dažu atslēgvārdu izmantošanu, lai arī šo īpašumu varētu izmantot loģiskā veidā.
Tātad, vai mēs joprojām izmantojam fiziskas kompensācijas? Iedomājieties, ka vēlaties, lai jūsu lapas augšējā un kreisajā stūrī būtu piestiprināta emblēma vai logotips, un neatkarīgi no valodas vēlaties, lai tas būtu tur. Tādā gadījumā jūs nevarat izmantot loģiskās nobīdes, un tā vietā būs jāizmanto fiziskās īpašības.
Pārlūka atbalsts
Atbalsts insetīpašumam joprojām ir agrīnā stadijā. Šajā rakstā Caniuse lēš, ka globālais atbalsts ir tikai 3,79%.
Darbvirsma
| Internet Explorer | Mala | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nē | Nē | 66+ | Nē | Nē | Nē |
Mobilais
| iOS Safari | Opera Mini | Android pārlūks | Chrome Android | Firefox Android |
|---|---|---|---|---|
| Nē | Nē | 68 | Nē | Nē |
Vairāk informācijas
- CSS loģisko īpašību un vērtību 1. līmenis (specifikācija, redaktora melnraksts)
- Izpratne par loģiskajām īpašībām un vērtībām (žurnāls Smashing)
- CSS loģiskās īpašības (CSS-triki)