Satır içi boyut - CSS Hileleri

Anonim

inline-sizeyazma modu yatay olduğunda bir öğenin genişliğini veya writing-modedikey olduğunda öğenin yüksekliğini tanımlayan mantıksal bir özelliktir .

.element ( inline-size: 700px; writing-mode: vertical-lr; )

Yukarıdaki örnekten tahmin edebileceğiniz gibi, writing-modeözellik metnin yönünü ve düzen akışını 90 derece değiştirir. Bunu yapmak istemenizin iki ana nedeni var.

İlk olarak, bir tasarım seçeneği olarak, bir öğe üzerinde dikey metin görüntülemek isteyebilirsiniz, örneğin bir başlık:

Satır içi boyut gibi mantıksal bir özelliği kullanmak isteyebileceğiniz ikinci - ve muhtemelen en önemli - neden, bir sitede uluslararasılaşmayı sağlamaktır. Çince, Japonca ve Korece gibi birçok Doğu Asya alfabesi yatay veya dikey olarak yazılabilir. Mantıksal özellikleri kullanarak, kullanıcının yazma moduna bağlı olarak öğelerin doğru boyutlandırma yönünü sağlayabiliriz.

Jen Simmons'ın CSS yazma modlarının derinliklerine inen bir makalesi ve sunumu var.

Neden güvenilir widthmülkü kullanamıyoruz ?

Yapabilirsin! Bununla birlikte, inline-sizeiçeriğinizin bağlamının bir kullanıcının diline göre değişmesinden endişe ediyorsanız , bunun yerine ulaşmak isteyebilirsiniz . widthfiziksel bir boyuttur, bu nedenle yazma modu değiştiğinde, bir öğe yatay genişlik boyutunu korur ve dikey olarak ayarlandığında bir düzeni bozar. Mantıksal özellikler, inline-sizebu değişikliklere yanıt verebilir ve uygun yönde genişlik uygulayabilir.

Örneğin, bir paragraf öğesi genişliği kullanarak 400 piksel genişliğinde ise, yazma modu olarak ayarlandığında vertical-lriçerik, düzeni değiştirerek dönecek, ancak bu paragraf 400 piksel uzunluk yerine 400 piksel genişliğinde kalacaktır.

Gördün mü? Peki, inline-sizeakıllı! Değere bağlı olarak genişlikten yüksekliğe değişir writing-mode.

Sözdizimi

inline-size:
  • İlk: auto
  • Şunlar için geçerlidir: aynı heightvewidth
  • Devralındı: hayır
  • Yüzdeler: karşılık gelen fiziksel özellik için
  • Hesaplanan değer:height ve ile aynıwidth
  • Animasyon türü: hesaplanan değer türüne göre

Değerler

/* Length values */ inline-size: 250px; inline-size: 5rem; 
 /* Percentage values */ inline-size: 75%; 
 /* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content; 
 /* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset;
  • auto: Öğenin satır içi boyutu, üst öğesinin boyutuna bağlı olacaktır.
  • fit-content(): Bu işlev, bir kabın istenen boyuta kadar büyümesine izin verir, ardından metni sararak içeriği sağlanan boyut değerine etkili bir şekilde sıkıştırır. Kutu boyutlandırmanın yanı sıra Izgara kaplarında da kullanılabilir ve caniuse, satır içi boyutta işlev için güçlü destek gösterirken, testimiz daha az kesin sonuç verdi. Bunun nedeni Kutu Boyutlandırma Modülü Düzey 3 spesifikasyonunun Çalışma Taslağı durumu olabilir.
  • max-content: İçsel tercih edilen genişlik, yani öğenin metni olabildiğince uzatacağı ve kutunun metin kadar uzun olmasını sağlayacağı anlamına gelir.
  • min-content: İçsel minimum genişlik, yani öğenin kutusu, içeriğinin minimum boyutuna küçültülür. Kutu, en büyük metin dizesi boyutunda olacaktır.

Demo

Tarayıcı desteği

IE Kenar Firefox Krom Safari Opera
Hayır 79+ 41+ 57 12.1+ 44+
Android Chrome Android Firefox Android Tarayıcı iOS Safari Opera Mobile
85+ 79+ 81+ 12.2+ 59+
Kaynak: caniuse

Aşağıdaki işlevleri kullanma desteğinin, mülkün desteğinden farklı olabileceğini unutmayın:

  • fit-content()
  • max-content()
  • min-content()

Daha fazla bilgi

  • CSS Mantıksal Özellikleri ve Değerleri Seviye 1 spesifikasyonu (Editör Taslağı)
  • MDN Belgeleri
  • CSS Mantıksal Özellikleri (CSS-Püf Noktaları)
  • Mantıksal Özellikleri ve Değerleri Anlama (Smashing Magazine)
  • CSS Mantıksal Özellikleri (Adrian Roselli)
  • CSS Izgarasında Min ve Maks İçerik Boyutlandırma (Jen Simmons, video)
  • CSS'de çift yönlü yatay kurallar (Hussein Al Hammad)