Vstavljen-inline - CSS-triki

inset-inlineje okrajšana logična lastnost CSS, ki nastavi dolžino odmika elementa v kombinirani smeri inset-inline-startin inset-inline-end. To je nekako tako kot razglasitvi rightin leftrazen njenega začetka in konca točke se določi element je direction, text-orientationin writing-mode, tako kot druge logične lastnosti.

Lastnost je del specifikacije CSS logičnih lastnosti in vrednosti 1, ki je trenutno v stanju osnutka urejevalnika. To pomeni, da se lahko definicija in informacije o njej spremenijo od zdaj do uradnega priporočila.

.element ( inset-inline: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Tako, na primer, če je način pisanja nastavljen horizontal-lrna inset-inlinenepremičnine bo deloval tako kot okolju topin bottomin nastavite element je odmik od spodnjega roba. Za positionisti element morate celo navesti eksplicitno za isti element, tako kot lastnosti fizičnega odmika.

Toda spremenite elemente writing-modena nekaj podobnega vertical-lrin "spodnji" rob se zasuka v navpični smeri in deluje bolj kot lastnosti leftin right.

Sintaksa

inset-inline: ;

• Začetna vrednost: auto
• Velja za: pozicionirane elemente
• Podedovano: ne
• Odstotki: kot za ustrezno fizično lastnost
• Izračunana vrednost: enaka ustrezni topin leftlastnosti
• Vrsta animacije: po izračunani vrednosti

Vrednote

inset-inlineima dolžinsko vrednost in podpira globalne ključne besede. Njegova privzeta vrednost je auto.

/* Length values */ inset-inline: 50px; inset-inline: 4em; inset-inline: 3.5rem inset-inline: 25vh; /* Percentage values */ inset-inline: 50%; /* Keyword values */ inset-inline: auto; /* initial value */ /* Global values */ inset-inline: initial inset-inline: inherit; inset-inline: unset;

Podpora brskalnika

IE	Rob	Firefox	Chrome	Safari	Opera
Ne	Ne	63+	Ne	Ne	Ne

Android Chrome	Android Firefox	Brskalnik Android	iOS Safari	Opera Mini
Ne	79+	Ne	Ne	Ne

Demo

nadaljnje branje

• Specifikacija logičnih lastnosti in vrednosti CSS 1. stopnje (urednikov osnutek)
• Dokumentacija MDN
• Razumevanje logičnih lastnosti in vrednot (Smashing Magazine)
• Logične lastnosti CSS (Adrian Roselli)
• Dvosmerna horizontalna pravila v CSS (Hussein Al Hammad)