Ek - CSS Hileleri

insetCSS özellik dört gömme özellikler için bir kısaltmadır, top, right, bottomve leftbir bildiriminde. Tıpkı dört ayrı özelliğin kendisi gibi, insetkonumlandırılmamış (statik) öğeler üzerinde hiçbir etkisi yoktur. Başka bir deyişle, bir öğe, positioniç metin özelliklerinin etkili olabilmesi için önce açık bir değer bildirmelidir .

.box ( inset: 10px 20px 30px 40px; position: relative; )

inset başlangıçta CSS Mantıksal Özellikleri ve Değerleri Seviye 1 spesifikasyonunda tanımlanmıştır ve 20 Nisan 2020 itibarıyla Editör Taslağında yer almaktadır.

Sözdizimi

Yukarıdaki örnekten de anlamış olabileceğiniz gibi, insetaynı çok değerli paddingve sözdizimini izler margin. Bu dört değerden sayısı kadar (için beyan sapmalarına kabul Bu demektir ki top, right, bottomve left) ve bir değer kadar az (bir dört özellikleri için ofset ile aynı değeri bildirmek için). Ve benzeri paddingve margindeğerler ile başlayarak, bir saat yönünde akar 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 */ )

Önceden inset, her bir insetalt mülkü aşağıdaki gibi ayrı ayrı beyan etmemiz gerekiyordu :

.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )

Şimdi, bunu tek bir CSS satırına yapabiliriz:

.box ( position: absolute; inset: 0; /* ? */ )

Değerler

insetTesis, üst, sağ, alt ve sol gibi sayısal değerleri kabul eder. Bu değerler gibi, herhangi bir geçerli bir CSS uzunlukta olabilir px, em, remve %diğerleri arasında,.

Mantıksal özellikler hakkında konuşalım

Buradaki mantıksal özelliklerin yüzeyini çizeceğiz, çünkü asıl odak noktası insetve bununla ilgili alt özellikler. Rachel Andrew tarafından yazılan bu Smashing Magazine makalesinde konuyla ilgili derinlemesine bir dalış yapın.

Orada daha fazladır insetdaha alt özellikleri top, right, bottomve leftonları anlamak için, ancak, 's değerinde mantıksal özellikleri ve değerleri ile tanışma.

İçerik, soldan sağa, sağdan sola, yukarıdan aşağıya ve aşağıdan yukarıya dahil olmak üzere farklı yönlerde (yani yazma modları) görüntülenebilir. "Mantıksal" kavramlardan bahsettiğimizde, içeriğin yazım yönüne göre gerçekten başlangıç ​​noktasına atıfta bulunuyoruz.

Hem İngilizce ve İspanyolca gibi soldan sağa (LTR) dilleri hem de Farsça veya Arapça gibi sağdan sola (RTL) dilleri desteklemesi gereken bir web sitesi oluşturduğunuzu hayal edin. Bir simge ile yanındaki satır metni arasına bir kenar boşluğu eklemek istediğinizi varsayalım.

Doğal olarak, margin-rightLTR'yi desteklemek için mülke ulaşabilir , ardından bu marjı kaldıran ve onu margin-leftRTL için değiştiren başka bir kural seti ekleyebilirsiniz :

.icon ( margin-right: 1em; ) 
 /* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )

Bu, bir sayfanın küçük bir bölümüdür. Şimdi bu şekilde büyük bir web sitesi oluşturduğunuzu hayal edin - bu çok fazla iş! Ancak mantıksal özellikler, bizim için yazma modunu dikkate alarak bunu kolaylaştırır. Örneğin , nerede olursa olsun, öğenin sonuna marj ekleyebiliriz :

.icon ( margin-inline-end: 1em; )

Mantıksal özelliklere atıfta bulunurken kastettiğimiz şey budur - bunlar fiziksel bir yönden ziyade yazma moduna bağlıdır. Mantıksal özelliklerle çalışmanın ne kadar mantıklı olduğunu görüyor musunuz?

Inset mantıksal özellikler

Dolayısıyla, mantıksal özellikler hakkında artık bildiklerinizi bilerek, işte dört ek alt özellik daha:

Mantıksal Özellik	Yatay Akış Eşdeğeri	Bu ne yapar
inset-block-start	top	Yazma yönüne dik yöndeki başlangıç ​​kenarı ofseti belirtir.
inset-block-end	bottom	Yazma yönüne dik yöndeki bitiş kenarı için ofseti belirtir.
inset-inline-start	left	Öğenin yazma moduna, yönüne ve metin yönüne bağlı olarak fiziksel bir öteleme ile eşleşen yazma yönündeki başlangıç ​​kenarı ofseti belirtir.
inset-inline-end	right	Yazma yönündeki bitiş kenarı için ofseti belirtir.

Hatta bu dört alt özelliği iki ek kısaltma özelliğinde gruplayabiliriz:

Mantıksal Özellik	Shorthand For	Bu ne yapar
inset-inline	inset-inline-start inset-inline-end	Grubu hem de tek bir değer kabul eder inset-inline-startve inset-inline-end. Ayrıca, ilkinin inset-inline-startve ikincisinin belirlediği iki değeri kabul eder inset-inline-end.
inset-block	inset-block-start inset-block-end	Hem inset-block-start hem de ayarlamak için tek bir değer kabul eder inset-block-end. Ayrıca, ilkinin inset-block-startve ikincisinin belirlediği iki değeri kabul eder inset-block-end.

Demo

Nasıl çalıştıkları hakkında daha iyi bir fikir edinmek için ek özelliklerin yazma modunu ve değerlerini değiştirin:

Dikkat: insetÖzellik mantıklı değil

insetMantıksal Özellikler ve Değerler spesifikasyonunun bir parçası olmasına rağmen , mantıksal blok veya satır içi uzaklıkları tanımlamaz. Bunun yerine, öğenin yazma modu, yönü ve metin yönünden bağımsız olarak fiziksel ofsetleri tanımlar. Başka bir deyişle, insetsadece kısaltılmış halidir top, right, bottomve left.

Burada GitHub'da, bu özelliği mantıklı bir şekilde kullanabilmek için bazı anahtar kelimelerin kullanımıyla ilgili bazı tartışmalar var.

Öyleyse, hala fiziksel ofsetler kullanıyor muyuz? Sayfanızın üst ve sol köşesine sabitlenmiş bir rozet veya logo istediğinizi ve dili ne olursa olsun orada olmasını istediğinizi hayal edin. Bu durumda mantıksal uzaklıkları kullanamazsınız ve bunun yerine fiziksel özelliklere başvurmanız gerekir.

Tarayıcı Desteği

insetMülke destek hala erken aşamasındadır. Bu yazı itibariyle caniuse, küresel desteği yalnızca% 3,79 olarak tahmin ediyor.

Masaüstü Bilgisayar

Internet Explorer	Kenar	Firefox	Krom	Safari	Opera
Hayır	Hayır	66+	Hayır	Hayır	Hayır

Cep Telefonu

iOS Safari	Opera Mini	Android Tarayıcı	Chrome Android	Firefox Android
Hayır	Hayır	68	Hayır	Hayır

Daha fazla bilgi

• CSS Mantıksal Özellikleri ve Değerleri Seviye 1 (Spesifikasyon, Editör Taslağı)
• Mantıksal Özellikleri ve Değerleri Anlama (Smashing Magazine)
• CSS Mantıksal Özellikleri (CSS Hileleri)