Iç satır içi uç - CSS Hileleri

İçindekiler:

Anonim

inset-inline-endbir öğenin başlangıç ​​satır içi yönde ofsetinin uzunluğunu ayarlayan bir CSS özelliğidir. Bu tür ilan benzeri var rightonun başlangıç hariç, bu konumlandırılmış elemanlar ve sapmalarına sol yönde unsurunu geçerli olduğu ve bitiş noktalarını eleman en dayanarak değişti edebilir direction, text-orientationve writing-modetıpkı diğer mantıksal özellikleri gibi.

Özellik, şu anda Editörün Taslak durumunda olan CSS Mantıksal Özellikleri ve Değerleri Seviye 1 spesifikasyonunun bir parçasıdır. Bu, onunla ilgili tanım ve bilgilerin şimdiki ve resmi tavsiye arasında değişebileceği anlamına gelir.

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

Yani, örneğin, yazma modu olarak ayarlanırsa özelliği sadece ayarı gibi hareket edecek , sol kenardan unsurunu düzenini bozmak. Hatta fiziksel ofset özelliklerinde olduğu gibi, aynı eleman üzerinde etkili olması için bir açık belirtmeniz bile gerekir .horizontal-lrinset-inline-endleftposition

Ancak, elemanın yerine writing-modebenzer bir şeye değiştirin vertical-lrve "başlangıç" kenarı dikey yönde döndürülerek daha çok onun topyerine davranın.

Sözdizimi

inset-inline-end: ;
  • Başlangıç ​​değeri: auto
  • Şunlar için geçerlidir: konumlandırılmış elemanlar
  • Devralındı: hayır
  • Yüzdeler: karşılık gelen fiziksel özellik için
  • Hesaplanan değer: karşılık gelen leftözellik ile aynı
  • Animasyon türü: hesaplanan değer türüne göre

Değerler

inset-blockbir uzunluk değeri alır ve genel anahtar kelimeleri destekler. Varsayılan değeri auto.

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

Tarayıcı desteği

IE Kenar Firefox Krom Safari Opera
Hayır Hayır 63+ Hayır Hayır Hayır
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mini
Hayır 79+ Hayır Hayır Hayır
Kaynak: caniuse

Demo

daha fazla okuma

  • CSS Mantıksal Özellikleri ve Değerleri Seviye 1 spesifikasyonu (Editör Taslağı)
  • MDN Belgeleri
  • Mantıksal Özellikleri ve Değerleri Anlama (Smashing Magazine)
  • CSS Mantıksal Özellikleri (Adrian Roselli)
  • CSS'de çift yönlü yatay kurallar (Hussein Al Hammad)