- Konu sahibi
- #1
CSS’te “webkit” genellikle
WebKit, bir tarayıcının HTML ve CSS’i işleyip ekranda göstermesini sağlayan tarayıcı motorlarından biridir. CSS’in kendisi “WebKit CSS” diye ayrı bir dil oluşturmaz. Farklı motorlar bazı özellikleri standartlaşmadan önce kendi ön ekleriyle uygulayabildiği için CSS dosyalarında
Ön ek tarihsel olarak bu amaçlarla kullanılmıştır; günümüzde bazı eski ön ekli biçimler uyumluluk için kalıcı olarak desteklenir. -webkit- görmek, tarayıcının kesinlikle WebKit motoru kullandığını kanıtlamaz; Chromium tabanlı tarayıcılar da pek çok böyle bildirimi destekler. Bir özellik artık standart CSS olarak destekleniyorsa ön ekli bildirime güvenmek yerine standart bildirimi tercih etmek gerekir.
Bir form kontrolünün varsayılan tarayıcı görünümünü kaldırmak için şu kullanım görülebilir:
Burada
Bir metni belirli sayıda satırla sınırlamak için örnek:
Bu örnek, metnin destekleyen tarayıcıda üç satırdan sonra gizlenmesini hedefler. Satır yüksekliği, yazı tipi ve kapsayıcı genişliği sonucu etkiler. Bu nedenle taşan metnin tamamını kullanıcıya gösterecek bir “devamını oku” davranışı gerekiyorsa yalnızca CSS’e güvenmek yerine arayüz davranışı ayrıca tasarlanmalıdır.
Önce standart CSS bildiriminin yeterli olup olmadığını kontrol edin. Ön ek gerekiyorsa standart ve ön ekli biçimi aynı kural içinde, genellikle ön ekli bildirim önce gelecek şekilde yazın:
Yukarıdaki appearance örneği bu sırayı gösterir. Metin seçimini gereksiz yere kapatan kuralları yalnızca ön ek örneği olsun diye bütün kartlara uygulamayın.
Bu sıralamada tarayıcı desteklediği son geçerli bildirimi kullanır. Standart özellik zamanla farklı veya daha doğru desteklenmeye başlarsa, ikinci satırın tercih edilmesi amaçlanır.
Aşağıdaki karar tablosu,
Örneğin bir efekt yalnızca
Bir bildirim çalışmıyorsa bu her zaman yazım hatası anlamına gelmez. Tarayıcı özelliği desteklemiyor olabilir, özellik ek bir koşul gerektirebilir veya aynı seçicideki başka bir kural sonucu geçersiz kılmış olabilir. Geliştirici araçlarında hesaplanan CSS değerlerini ve kuralın neden uygulanmadığını inceleyin.
Her WebKit ön ekini zorunlu sanmak: Güncel ve standart CSS özelliklerine gereksiz ön ek eklemek kodu karmaşıklaştırır.
Yalnızca ön ekli sürüme güvenmek: Bu yaklaşım, farklı motorlarda özelliğin tamamen kaybolmasına yol açabilir. Temel görünüm için standart veya yedek bir davranış bırakın.
Tarayıcı adına göre kesin sonuç varsaymak: Destek, yalnızca tarayıcı adına değil motor sürümüne, özelliğin durumuna ve kullanım biçimine de bağlı olabilir. Gerçek hedef tarayıcılarda test yapın.
Ön eki CSS’in adı sanmak: WebKit bir tarayıcı motorudur;
Hayır. Ön ek yalnızca bazı özellikler için bulunur. Bir özelliğin ön ekli biçimi yoksa uydurarak kullanmak işe yaramaz; ilgili standart sözdizimi ve tarayıcı desteği incelenmelidir.
Özelliğin sözdizimini, destek koşullarını ve kuralın başka bir CSS bildirimi tarafından ezilip ezilmediğini kontrol edin. Ardından standart bildirim ve desteklenmeyen tarayıcılar için temel bir yedek görünüm ekleyin.
-webkit- ile başlayan satıcı ön ekini ifade eder. Bu ön ek, özellikle WebKit tabanlı tarayıcılara özgü veya deneysel CSS özelliklerini belirtmek için kullanılmıştır. Örneğin -webkit-appearance ve -webkit-line-clamp gibi bildirimler buna örnektir. Ancak -webkit- yazmak CSS’i otomatik olarak tüm tarayıcılarda çalıştırmaz; yalnızca ilgili özelliği destekleyen motorlarda etkili olabilir.WebKit ile CSS ilişkisi
WebKit, bir tarayıcının HTML ve CSS’i işleyip ekranda göstermesini sağlayan tarayıcı motorlarından biridir. CSS’in kendisi “WebKit CSS” diye ayrı bir dil oluşturmaz. Farklı motorlar bazı özellikleri standartlaşmadan önce kendi ön ekleriyle uygulayabildiği için CSS dosyalarında
-webkit- biçimi görülür.Ön ek tarihsel olarak bu amaçlarla kullanılmıştır; günümüzde bazı eski ön ekli biçimler uyumluluk için kalıcı olarak desteklenir. -webkit- görmek, tarayıcının kesinlikle WebKit motoru kullandığını kanıtlamaz; Chromium tabanlı tarayıcılar da pek çok böyle bildirimi destekler. Bir özellik artık standart CSS olarak destekleniyorsa ön ekli bildirime güvenmek yerine standart bildirimi tercih etmek gerekir.
Somut örnek: görünüm ve satır sınırlama
Bir form kontrolünün varsayılan tarayıcı görünümünü kaldırmak için şu kullanım görülebilir:
Kod:
button {
-webkit-appearance: none;
appearance: none;
}Burada
appearance: none standart bildirimi, -webkit-appearance: none ise eski veya özel uyumluluk ihtiyacı için eklenmiştir. Standart bildirim destekleniyorsa tarayıcı onu kullanır; desteklemeyen bazı ortamlarda ön ekli bildirim devreye girebilir.Bir metni belirli sayıda satırla sınırlamak için örnek:
Kod:
.aciklama {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}Bu örnek, metnin destekleyen tarayıcıda üç satırdan sonra gizlenmesini hedefler. Satır yüksekliği, yazı tipi ve kapsayıcı genişliği sonucu etkiler. Bu nedenle taşan metnin tamamını kullanıcıya gösterecek bir “devamını oku” davranışı gerekiyorsa yalnızca CSS’e güvenmek yerine arayüz davranışı ayrıca tasarlanmalıdır.
Ön eki kullanma kararı
Önce standart CSS bildiriminin yeterli olup olmadığını kontrol edin. Ön ek gerekiyorsa standart ve ön ekli biçimi aynı kural içinde, genellikle ön ekli bildirim önce gelecek şekilde yazın:
Yukarıdaki appearance örneği bu sırayı gösterir. Metin seçimini gereksiz yere kapatan kuralları yalnızca ön ek örneği olsun diye bütün kartlara uygulamayın.
Bu sıralamada tarayıcı desteklediği son geçerli bildirimi kullanır. Standart özellik zamanla farklı veya daha doğru desteklenmeye başlarsa, ikinci satırın tercih edilmesi amaçlanır.
Aşağıdaki karar tablosu,
-webkit- kullanımını değerlendirirken pratik bir ayrım sağlar.| Durum | Tercih | Neden |
|---|---|---|
| Standart özellik yeterli | Standart CSS | Daha taşınabilir ve anlaşılırdır |
| Eski WebKit uyumluluğu gerekiyor | Ön ekli ve standart bildirim | Destek kapsamı genişletilebilir |
| Yalnızca deneysel özellik | Tarayıcı desteğini test ederek kullan | Davranış ve sözdizimi değişebilir |
| Görsel açıdan kritik davranış | Yedek stil veya alternatif akış ekle | Özellik desteklenmezse içerik kullanılabilir kalır |
Örneğin bir efekt yalnızca
-webkit- satırına bağlıysa, desteklemeyen tarayıcıda efektin kaybolması kabul edilebilir mi karar verin. Kabul edilemiyorsa temel görünümü ön ek olmadan tanımlayın ve gelişmiş davranışı sonradan ekleyin.Uygulama ve kontrol adımları
- Kullanmak istediğiniz özelliğin standart CSS karşılığını belirleyin; yalnızca
-webkit-biçimini bulduğunuz için onu doğrudan kopyalamayın. - Standart bildirimi temel davranış olarak yazın. Ön ekli sürüm gerekiyorsa aynı kural içinde ekleyin.
- Özelliği desteklemeyen tarayıcıda sayfanın nasıl görüneceğini kontrol edin; içerik okunamıyor veya işlem yapılamıyorsa yedek stil hazırlayın.
- Masaüstü ve mobil tarayıcılarda gerçek sayfayı test edin. Geliştirici araçlarında kuralın geçerli, üzeri çizili veya tanınmıyor olarak görünüp görünmediğine bakın.
- Ön ek artık gerekli değilse kaldırmayı değerlendirin; fakat bunu desteklemeniz gereken tarayıcı aralığını test etmeden yapmayın.
Bir bildirim çalışmıyorsa bu her zaman yazım hatası anlamına gelmez. Tarayıcı özelliği desteklemiyor olabilir, özellik ek bir koşul gerektirebilir veya aynı seçicideki başka bir kural sonucu geçersiz kılmış olabilir. Geliştirici araçlarında hesaplanan CSS değerlerini ve kuralın neden uygulanmadığını inceleyin.
Sık yapılan hatalar
Her WebKit ön ekini zorunlu sanmak: Güncel ve standart CSS özelliklerine gereksiz ön ek eklemek kodu karmaşıklaştırır.
Yalnızca ön ekli sürüme güvenmek: Bu yaklaşım, farklı motorlarda özelliğin tamamen kaybolmasına yol açabilir. Temel görünüm için standart veya yedek bir davranış bırakın.
Tarayıcı adına göre kesin sonuç varsaymak: Destek, yalnızca tarayıcı adına değil motor sürümüne, özelliğin durumuna ve kullanım biçimine de bağlı olabilir. Gerçek hedef tarayıcılarda test yapın.
Ön eki CSS’in adı sanmak: WebKit bir tarayıcı motorudur;
-webkit- ise bazı CSS bildirimlerinde kullanılan bir satıcı ön ekidir. Bunlar CSS’in ayrı bir sürümü değildir.Kaynaklar
Sık sorulan sorular
-webkit- ile standart CSS arasındaki fark nedir?
-webkit- biçimi belirli motorlara yönelik uyumluluk veya deneysel kullanım içindir. Standart CSS bildirimi ise tarayıcı motorlarından bağımsız, standartlaştırılmış kullanımdır.Her CSS özelliğinin -webkit- karşılığı var mı?
Hayır. Ön ek yalnızca bazı özellikler için bulunur. Bir özelliğin ön ekli biçimi yoksa uydurarak kullanmak işe yaramaz; ilgili standart sözdizimi ve tarayıcı desteği incelenmelidir.
Ön ekli CSS satırı çalışmıyorsa ne yapmalıyım?
Özelliğin sözdizimini, destek koşullarını ve kuralın başka bir CSS bildirimi tarafından ezilip ezilmediğini kontrol edin. Ardından standart bildirim ve desteklenmeyen tarayıcılar için temel bir yedek görünüm ekleyin.
