CSS Shorthand vs. Longhand - Ne Zaman Kullanılacağı

Shorthand ve Longhand - biri özlü diğeri ise kesin. Biri, kısalıklık arzusundan ortaya çıktı, diğeri ise açıklığı korumak için sıkı durdu. Her iki durumda da, konuşmak için kendi amaçları, artıları ve eksileri var..

Bu gönderi, hem CSS kısa yol yazımlarına hem de uzun yol yazımlarına ışık tutacak ve hangisinin hangi durum için kullanılacağına karar verecektir..

Shorthand Mülkiyet Nedir??

Shorthand özelliği diğer CSS özelliklerinin değerlerini alan bir özelliktir. Örneğin, bir değer atayabiliriz. Çerçeve genişliği, border-style ve sınır rengi kullanmak sınır yalnız mülk.

temel olarak,

 sınır: 1px katı mavi; 

aynıdır:

 sınır genişliği: 1 piksel; sınır tarzı: katı; kenarlık rengi: mavi;

Bununla, bireysel mülkiyet değerlerini ayrı ayrı beyan etmek zorunda değiliz (ki bu gereksiz, zaman ve alan tüketir). Ayrıca beyannamedeki terkedilmiş mülkleri de sıfırlayarak sıfırlanabilir..

O nasıl çalışır?

Daha önce de belirtildiği gibi, bir kısayolda başka özellik değerleri kümesi yazıyoruz, kısayoldaki tüm özellik değerlerinin sırası önemli değil. farklı bir tür gibi sınır. İle özellikleri için benzer değer türleri marj gibi, sipariş önemli. Şüphe durumunda, saat yönünde hatırla!

Şimdi, peki ilandaki bir ya da iki mülkü kaçırırsak ne olur? Yukarıdaki örnekte, görmezden geldiğimizi varsayalım. border-style.

 sınır: 1px mavi; 

Sınırları bir daha göremeyiz, çünkü kestirme özellik işe yaramadı çünkü border-style bıraktığımız varsayılan değer Yok. Bu kestirme özellik nasıl işlendi?.

 sınır: 1px hiçbiri mavi; 

Şimdi bırakalım 1px için Çerçeve genişliği ve diğer ikisini sakla:

 sınır: düz mavi;

Sınırları yalnızca daha kalın genişlikte görebileceğiz ve bunun nedeni budur. Çerçeve genişliği özellik varsayılan değeri aldı orta.

 sınır: orta katı mavi; 

Bu bizim için sonuca varıyor ki özellik değeri dışarıda bırakıldığında kısa bir beyanda, bu özellik varsayılan değerini alıyor (aynı değer için atanmış herhangi bir önceki değeri geçersiz kılmak zorunda olsa bile).

Varsa sınır genişliği: 1 piksel; daha önce bir yerde bir element için sınır: düz mavi; Aynı şekilde, sınır genişliği olacak orta (varsayılan değer) 1px.

Bahsetmeye değer başka bir şey gibi değerleri kullanamayız miras almak, ilk veya unset, tüm CSS özellikleri için kullanılabilir. Bunları kullanırsak, tarayıcı bu değerin hangi özelliği temsil etmesi gerektiğini tam olarak bilmeyecektir - tüm bildirim iptal edilecek.

herşey özellik

Olabilecek bir CSS kestirme özelliği var Tüm CSS özellikleri için değeri ayarla. CSS çapında değerler miras almak, ilk ve unset tüm özelliklere uygulanabilir ve bu nedenle bunlar tarafından kabul edilen tek değerlerdir. herşey özellik.

 div all: initial

Bu yapacak div element, sahip olduğu CSS özellik değerlerinin TÜMÜNÜ hendekleyin ve her birinde varsayılan değeri sıfırlayın.

⚠ Uyarı

Kötüye kullanmayalım herşey özelliği. Bunun ihtiyacı, yalnızca bu özelliği uygulamak istediğimiz bir öğenin önceki CSS koduna dokunamadığımız durumlarda çok nadir durumlarda ortaya çıkabilir..

Not: CSS özelliği renk Her renk kanalındaki iki adet hex değerinin aynı olması durumunda, onaltılık nota basamağı ile alınız. Örneğin, arkaplan: # 445599; aynı arkaplan: # 459;.

Longhand özelliği nedir?

bireysel özellikler bir kısayol özelliğine dahil edilebilecek kısayol özellikleri olarak adlandırılır. Bazı örnekler; arka plan görüntüsü, margin-left, animasyon süresi, vb.

Neden kullanmalıyız?

Kısa yoldaki alternatifler kullanışlı olsa da, dezavantajları da vardır. Unutma, başlangıçta bırakılan herhangi bir özelliği varsayılan değerleriyle ne kadar kısaltmanın geçersiz kıldığını gördük? Sıfırlama istenmiyorsa bu sorun olabilir.

Al yazı tipi Örneğin shorthand özelliği. İçinde kullanalım h4 öğe (varsayılan bir tarayıcı stiline sahip) font-weight: bold)

 font: 20px "kurye yeni"; 

Yukarıdaki kısa yol kodunda, değer için bir değer yoktur. yazı ağırlıklı mülkiyet, dolayısıyla font-weight: bold(tarayıcı varsayılan stili) varsayılan değere göre geçersiz kılınır yazı ağırlık: Normal neden h4 amaçlanmayan kalın stilini yitirecek unsur.

Yani, yukarıdaki örnek için basit iki el yazısı özelliği, yazı Boyutu ve font ailesi mükemmel.

Ayrıca, sadece bir veya iki özellik değeri atamak çok kullanışlı değildir. Tarayıcıya, çalışacak yalnızca bir kişi gerektiğinde, her bir mülkü (soldakiler de dahil olmak üzere) kısa yoldan yorumlamak için fazladan çalışma izni verin.?

Üretim aşamasında, geliştirme aşamasında, bazı geliştiriciler (özellikle yeni başlayanlar için), uzun el yazısı gösterimini çalışmak için çok kısa yoldan çok daha kolay bulabilirler. daha iyi okunabilirlik ve netlik.

Sonuç

Günümüzde hızlı kodlama (Emmet gibi araçların yardımı ile) ve küçültme imkanı sayesinde, stenoda yüksek bir güvenilirlik gerekli değildir, ancak aynı zamanda yazması çok mantıklıdır. marjı: 0;. CSS notasyonlarımızı tercih etme bağlamımız değişecektir Tek yapmamız gereken, hangi gösterimin bizim için en iyi sonucu vereceğini bulmak..