Css 'eski' biriminin değeri nedir?

( Popüler bir .Net birim test kitaplığı olan Xunit ile karıştırılmamalıdır .)

Bugün can sıkıntısıyla Gmail'lerin DOM'unu incelemeye başladım (evet, çok sıkılmıştım).

Belirli öğelerin genişlikleri hakkında ilginç bir özellik fark edene kadar her şey oldukça basit görünüyordu. Ünlü Googlites, nadir bulunan 'eski' birimi kullanarak bir dizi tablo sütunu belirtmişti.

width: 22ex;

İlk başta şaşkına döndüm ("'eski' nedir?"), Sonra bana geri geldi: Yıllar öncesinden CSS hakkında ilk öğrendiğim zamandan bir şeyler hatırlıyorum. CSS3 spesifikasyonundan :

[ Eski birim ] ilk kullanılabilir yazı tipinin kullanılan x yüksekliğine eşittir . X-yüksekliği, genellikle küçük "x" harfinin yüksekliğine eşit olduğu için denir. Ancak, "x" içermeyen yazı tipleri için bile bir "ex" tanımlanır.

İyi ve güzel. Ama daha önce kullanıldığını hiç görmedim (kendim çok daha az kullandım). Ems'i oldukça yaygın kullanıyorum ve değerini anlıyorum, ama neden "eski"? Em'den çok daha az standart bir ölçüm ve çok daha az kullanışlı görünüyor.

Bu konuyu tartışırken bulduğum birkaç sayfadan biri Stephen Poley'in http://www.xs4all.nl/~sbpoley/webmatters/emex.html . Stephen iyi noktalara değiniyor, ancak tartışması bana sonuçsuz geliyor.

Öyleyse sorum şu: 'eski' birim web tasarımına ne değer veriyor?

(Bu soru öznel olarak etiketlenebilir, ancak bu kararı kendimden daha deneyimli SO'lara bırakacağım.)

Metninizin küçük harflerinin yüksekliğine göre bir şeyi boyutlandırmak istediğinizde kullanışlıdır. Örneğin, böyle bir tasarım üzerinde çalıştığınızı hayal edin:

Tasarımın tipografik boyutunda, harflerin yüksekliği diğer unsurlarla önemli uzamsal ilişkilere sahiptir. Yukarıdaki kaynak görüntüdeki satırlar, metnin x yüksekliğini göstermeye yardımcı olmayı amaçlamaktadır, ancak aynı zamanda, bu metin etrafında tasarım yaparken kılavuzların nerede olacağını da gösterirler.

Jonathan'ın yorumlarda belirttiği gibi, ex basitçe em'in yükseklik versiyonudur (genişlik).

Soruyu cevaplamak için üst simge ve alt simge kullanmaktır. Misal:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

Burada dikkate alınması gereken bir diğer husus, bir kullanıcı yazı tipi boyutunu artırdığında veya düşürdüğünde (belki ctrl + fare tekerleğini (pencereler) kullanarak) sayfanızın nasıl ölçeklendiğidir.

Onları .. padding-left: 2 em; padding-right: 2 em;

ve dolgulu alt: 2 ex; padding-top: 2 ex;

Bu nedenle, dikey ölçekleme özelliği için dikey bir ölçü birimi ve yatay olarak ölçekleme özelliği için yatay bir ölçü birimi kullanılır.

CSS spesifikasyonuna sahip olmanın değeri, gerçekten sorduğunuz şey buysa, em birimine sahip olmanın değeriyle tamamen aynıdır.

Yazı tiplerini göreceli boyutlara ayarlamanıza olanak tanır .

Temel yazı tipi boyutumun ne olduğunu bilmiyorsun. Bu nedenle, web tasarımı için iyi bir strateji, yazı tipi boyutlarını mutlak değil göreli olarak ayarlamaktır; "on piksel" gibi sabit bir boyut yerine "normal boyutunuzun iki katı" veya "normal boyutunuzdan biraz daha küçük" eşdeğeri.

"Tek / çift satır aralığı" gibi terimlerin aslında em ile ölçülen iki bitişik çizgi arasındaki kayma anlamına geldiğini unutmayın . Yani "çift satır aralığı", her satırın 2 em yüksekliğe sahip olduğu anlamına gelir .

Bu nedenle, "çizgiler" ile orantılı dikey bir mesafe belirtmek istiyorsanız, em kullanın. Sadece küçük harf yüksekliğini istiyorsanız ex kullanın, ki bu çok daha nadir bir örnektir.

GÜNCELLEME: Web standardı, tarayıcının eski olarak 0.5em kullanmasına veya yazı tipinden türetmesine izin verir.

Ancak, herhangi bir "x-yükseklik" bilgisini bir yazı tipine (OpenType veya web yazı tipi) güvenli bir şekilde yerleştirmenin bir yolu yoktur.

Bu nedenle, ilk olasılık eski birimi gereksiz kılar ve ikincisi gerçekleşecek herhangi bir güvenilir araçtan yoksundur. Her ikisinin de mümkün olması gerçeği onu daha da az güvenilir kılar.

Bu yüzden eski birimin değer eksikliğini savunuyorum.