Savunma HTML ve CSS

...

Bu, düzenli bir evde kalmak için mükemmel bir şekilde uygun olabilir, ancak bir üçüncü taraf uygulaması için tam bir no-no'dur. Sebep? Böyle bir genel sınıf adı, üst sayfa tarafından zaten kullanılma şansına sahiptir. Bu stil kuralını tanıtırsanız, yayıncı tarafından konulmuş mevcut bir stil kuralını geçersiz kılabilir ve site düzenini bozabilirsiniz. Ya da, tersine, onların kuralı sizinkini geçersiz kılabilir ve widget'ınızı yanlışlıkla yeniden boyutlandırabilir.

Çözüm? Tüm sınıf adlarınızı (ve diğer nitelikleri), uygulamanıza özgü bir tanımlayıcıyla (bir ad alanı) önek. Stork küçük aracının durumunda, önceki işaretleme şöyle görünmelidir:

...

Fikir, JavaScript kodunuzu, ana sayfada çalışan kodla çakışan genel nesneleri bildirmeyecek şekilde adlandırmanızdır. Sayfaya eklediğiniz her HTML parçasına kadar uzanır: Kimlikler, sınıflar, veri- * özellikleri, form adları, vb.

Ad alanı HTML ve CSS, doğrudan yayıncının sayfasına yönlendiren üçüncü taraf uygulamaları için bir zorunluluktur. Bu sadece çelişen CSS kurallarını önlemek için gerekli değildir; Ayrıca, ana sayfanın tanımlayıcı özellikleri kendinize ait olan öğeler için DOM'yi sorgulayan JavaScript’e sahip olması da düşünülebilir. DOM'a koyduğunuz her şeyi adlandırma konusunda titiz olun.

CSS özgüllüğü

Yararlı olsa da, HTML ve CSS'nizi adlandırmak, yayıncının yalnızca sizinkiyle aynı ada sahip özelliklere başvuran stilleri veya sorguları kullandığı durumları önlediğini unutmayın. Ne yazık ki, CSS’leri kimlikleri, sınıf adları ve öğelerinize doğrudan referans almayan özellikler kullanıyor olsa bile, pencere öğeniz, ana sayfanın tanımladığı stillerle çakışabilir. Bunun nedeni, bazı CSS kurallarının tarayıcı tarafından daha ağır bir şekilde tartılması ve tanımlayabileceğiniz görünüşte alakasız kurallara göre öncelik kazanmasıdır. Bu fenomen CSS özgüllüğü olarak adlandırılır ve yayıncının sayfasında öğeleri güvenli bir şekilde oluşturabilmeniz için bunu anlamanız gerekir.

Bir önceki bölümden ad alanlarındaki kapsayıcı örneğine dönelim. Yayıncının HTML'sinin, tüm içeriğini bir sayfa kimliği ile saran üst düzey bir DIV’a sahip olduğunu varsayalım:

... 
  ... 

Ayrıca, sayfanın yayıncı tarafından ilk kuralın tanımlandığı aşağıdaki CSS'ye sahip olduğunu ve ikinci kuralın lordk konteynırını hedeflemesinin üçüncü taraf komut dosyanız tarafından eklendiğini varsayalım:

/* Publisher */#page div {background-color: green;}/* Camera Stork */.stork-container {background-color: blue;}

Şimdi, hangi renk .stork-konteynır var? Cevap şoka girip sizi uyarabilir: yeşil. Bu basit örnekte, yayıncı kuralı (#sayfa div) üçüncü taraf uygulamanızın sınıf kuralına (.stork-container) göre önceliklidir. Bunun nedeni, tarayıcının, kimlikleri veya özellikleri hedefleyenlerden daha yüksek kimlikleri içeren kuralları ağırlaştırmasıdır.

CSS kural öncelikleri

W3C CSS belirtimi, tarayıcıların farklı kural türlerine öncelik tanıması anlamına gelir. En yüksek öncelikten en düşüğe doğru sıralanan bu kural türlerinin listesi:

1. Satır içi stiller (stil = ”…”)
2. kimlikleri
3. Sınıflar, nitelikler ve sözde sınıflar (: focus,: hover)
4. Öğeler (div, span, vb.) Ve sözde öğeler (: önce,: sonra)

Bu şemaya göre, satır içi stiller tüm takip eden kural türlerinin üstünde: ID'ler, sınıflar ve öğelerden ölçülür. Bu, listeden mantıksal olarak devam eder; kimlikler sınıflara ve öğelere göre daha yüksek önceliklidir, vb. Bu listede bir istisna var: Önemli anahtar kelime ile etiketlenen özellikler en yüksek önceliği alır. Ancak, önemli anahtar kelimenin kural dahilinde bir kural dahilinde tek bir özelliği etkilediğini unutmayın.

Aynı ağırlığa sahip birden fazla CSS kuralına sahip olduğunuzda, her biri aynı unsuru etkileyebilecek ne olabilir? Bir örneğe bir bakalım:

Eat your vegetables!

Açıklığın renginin ne olduğunu düşünüyorsunuz? Cevap yine şaşırtıcı olabilir: sarı. Bu kurallar her şeyden önce sınıf temelli olsa da, ikinci kural (.storkcontainer span), birinci kuraldan daha özel olarak kabul edilir ve üçüncü kural (.stork-container .stork-msg), saniyeden daha spesifiktir. Bu nasıl çalışıyor?

Satır içi stilleri kraldır

CSS özgüllüğü açısından, yani. Bu bölümde daha önce hatırlıyorsanız, satır içi stillerin ana sayfa ile nadiren çakıştığından bahsetmiştik. Şimdi bunun nedenleri açık: Her diğer normal CSS kuralına göre önceliklendiriliyorlar (! Önemli anahtar kelimeye sahip olanlar hariç). Özellikle basit bir widget yazıyorsanız, satır içi stilleri kullanmak kötü bir fikir olmayabilir; Çoğu CSS özgüllüğü çakışmasından kaçınacaksınız.

Tarayıcı, hangi kuralın önceliğe sahip olduğunu belirlemek için basit bir puanlama sistemi kullanır. Belirli bir kural için, bu kuralı oluşturan her seçici belli bir değere değer. Bu değerler bir özgüllük puanı oluşturmak için toplanmıştır. Birden çok kural aynı öğeyi etkilediğinde, tarayıcı her kuralın özgüllük puanını karşılaştırır ve en yüksek puanı alan kural öncelik kazanır. Bir kravat durumunda, en son tanımlanan kural kazanır. Satır içi stil özellikleri: 1000; Kimlikler: 100; sınıflar, sözde sınıflar ve öznitelikler: 10, elemanlar ve sözde ögeler: 1.

Dolayısıyla, önceki örneğimize baktığımızda, bu CSS kurallarına, tarayıcı tarafından öncelik verilen en yüksek puanlama kuralıyla aşağıdaki puanlar verilmiş olurdu: Bu sıradan sayılar olmadığınızı hızlı bir şekilde fark edeceksiniz. Bir özgüllük skoru, aslında, b'den daha değerli olan, c'den daha değerli olan bir formun (a, b, c, d) bir tuplesidir. Bu, tek satır içi stil özniteliğinin (1, 0, 0, 0) neden olduğu bir stilin yüz kimlik seçiciye (0, 100, 0, 0) sahip bir kuraldan daha yüksek özgüllüğe sahip olduğu anlamına gelir.

• .stork-container (0,0,1,0 - bir sınıf seçici)
• .stork-konteyner açıklığı (0,0,1,1 — bir sınıf seçici, bir eleman seçici)
• .stork-container .stork-msg (0,0,2,0 — iki sınıf seçicisi)

Bu noktada, CSS özgüllüğünün nasıl çalıştığı ve tarayıcının neden başkalarına göre bazı kurallara öncelik verdiğine dair iyi bir tutumun olması gerekir. Daha sonra bu bilgiyi kullanmak için kullanacağız, çünkü CSS'yi çelişen yayıncı stilleri karşısında uzun durmaya yönelik bazı yaklaşımları inceliyoruz.

Aşırı belirleyici CSS

Yayıncının sayfasıyla çelişmeyen CSS yazmanın ilk ve en basit yaklaşımı kurallarınızı gereğinden fazla belirtmektir. Bu, kurallarınızın özgüllüğünü artırmak için ek seçicilerin bildirilmesi anlamına gelir; böylece, tarayıcınız kurallarınızı ana sayfayla karşılaştırdığınızda, muhtemelen daha yüksek puan alır ve önceliklendirilir.

Buna pratikte bakalım. Her biri benzersiz bir kimliğe sahip iki kapsayıcı öğeyi spor eden Stork pencere öğesi kapsayıcısının bu gözden geçirilmiş örneğini düşünün:

Mikon E90 Digital SLR
  "/> 
  599 $ 
  4.3 / 5.0 • 176 Yorum 

Bu HTML için beraberindeki CSS şu şekilde görünebilir:

#stork-main #stork-container { ... }#stork-main #stork-container .stork-product { ... }#stork-main #stork-container .stork-price { ... }

Her iki kapsayıcı kimliğini de, tüm CSS kurallarınızın ana seçicisi olarak gereksiz yere belirterek, CSS kurallarınızın her birine etkili bir şekilde (0,2,0,0) asgari özgüllük puanı verirsiniz. Daha sonra yayıncının önceki #page kuralı artık widget'ınızla çakışmayacak, çünkü yalnızca tek bir kimlik kullanıyor. Tamamen herhangi bir sınıf veya öğe tabanlı kurallar da çatışmaz, çünkü bunlar ID'nin altındaki bir CSS ağırlık sınıfıdır. Seçim amacıyla, kurallarınız için ikinci bir kimlik belirtmek tamamen gereksiz olsa da, burada, özgüllüğü artırmak için etkili bir aygıt olarak çalışır.

Aklınızı bir CSS preprocessor ile koruyun

Aşırı belirtilmiş CSS yazmak gerçek bir sürükleme olabilir: CSS kurallarınızın her biri için tekrar tekrar aynı kimlikleri tekrar yazmanız gerekir. CSS dilini, kuralların iç içe geçmiş hiyerarşilerini bildirme yeteneği gibi ek özelliklerle genişleten bir CSS önişlemcisi kullanarak bunu düzeltebilirsiniz. Örneğin, LESS CSS önişlemcisini kullanarak, önceki örneği aşağıdaki gibi yazabilirsiniz:

#stork-main {#stork-container {.stork-product { ... }.stork-price { ... }}}

Günümüzde çeşitli özellik kümeleri olan bir dizi popüler CSS ön işlemcisi bulunmaktadır. En popüler olanlar arasında AZ,Sass, ve Stylus.

Kapak tarafındaki bu örnek, widget'inizin üst düzey kapsayıcıları kimlikleriyle kullanmasını gerektirir; bu, aynı sayfada birden çok kez oluşturulabilecek widget'lar için pratik olmayacaktır. Buna ek olarak, hala kurşun geçirmez değildir: Bir yayıncı, liderinizi takip edebilir ve kendi CSS kurallarını gereğinden fazla belirleyebilir, bu da daha önce sahip olduğunuz aynı soruna neden olabilir.

Ancak bu, özellikle de kuralların her birinde iki kimlik belirttiğinizden dolayı, beklenmedik bir senaryo. Alternatif olarak birini kullanabilirsiniz, ancak bu elbette daha savunmasız olacaktır. Gerçek şu ki, çoğu yayıncı aklı CSS kurallarını kullanmaktadır ve bu şekilde kurallarınızı gereğinden fazla ifade etmek çoğuyla uyumlu olacaktır.

Aşırı belirleyici CSS, kod kalitesi araçlarıyla karışmaz

CSS'nizi bu şekilde aşacak şekilde belirlediğinizde, CSS Lint, Google Page Speed ​​ve Yahoo's YSlow gibi CSS kodunuzun kalitesini değerlendiren olası bir düşman bulabilirsiniz. Bu araçlar, yedekli CSS seçicilerini yaptığınızı gösterir ve dosya boyutunu azaltmak ve tarayıcıların CSS performansını artırmak için bu seçicileri kaldırmanızı tavsiye eder. Ne yazık ki, bu araçlar akılda üçüncü şahıs betikleri ile programlanmamıştır ve CSS'nin fazlaca belirtilmesiyle ilgili yararlılığı değerlendirmemektedir. Üçüncü taraf uygulamaları için aşırı özelliğin faydaları, ekstra dosya boyutu ve küçük performans isabetlerinden daha ağır basacaktır.

Kötüye kullanım önemli

CSS'nizi fazladan kimlikle veya sınıf seçmenleriyle fazlaca belirten bir ifadenin yeterince ileri gitmediğini düşünüyorsanız, nükleer seçeneğinizi kaldırabilirsiniz: Önemli anahtar kelime. Önemli bir kelimeyi spor eden bir CSS kuralındaki özellikler, satır içi stillerden bile en yüksek düzeyde önceliklendirilir. Bunun nedeni, önemli anahtar kelimelerin tarayıcı kullanıcılarına tarayıcı eklentileri veya siteye özgü stiller durumunda “yazar” (yayıncı) stillerini geçersiz kılmalarını sağlamak için tasarlanmış olmasıdır. Tüm CSS özelliklerinde kullanıp bunları diğer tüm kurallara göre önceliklendirerek önemli ölçüde kötüye kullanabilirsiniz.

Önemli CSS kuralındaki önemli anahtar kelimeyi nasıl kullanabileceğinizi buradan öğrenebilirsiniz:

.stork-price {font-size: 11px !important;color: #888 !important;text-decoration: none !important;display: block !important;}

Mülk başına olduğu için, önemli anahtar kelimenin böyle tekrarlanması gerekir, bu da uzun ve karmaşık bir stil sayfası üzerinde bir sürükleme haline gelebilir. Ancak, karşılığında, yayıncının sayfası tarafından sıfırlanması pek mümkün olmayan, kayaya dayanıklı bir stil sayfası kümesi elde edersiniz.

Yayıncının, öğelerinizi hedeflemek ve kendi stillerini belirlemek için kullanabileceği önemli bir nokta da olabilir; bu noktada, öğelerinizi kişiselleştirme amacıyla bilerek hedeflersiniz. Bir yandan, tutarlı bir görünüm ve his sağlamaya çalışıyorsanız bu sinir bozucu olabilir. Ancak, yayıncıların widget'ınızı özelleştirmesine izin vermeye karar verdiyseniz, bu muhtemelen istenen davranışdır.

Bir şey açık olmalı: DOM'ı yayıncıyla paylaşmak, tutarlı bir şekilde tasarlanmış bir widget oluşturmak için özellikle zorlaştırabilir. Çatışma olasılığını azaltmak için CSS kurallarınızı gereğinden fazla ifade etmek için gerekli adımları atabilseniz de, yayıncının, öğelerinizi ister istemez ister istemez, kendi kuralları ile hedeflemesi her zaman mümkündür.

Ancak DOM'ı yayıncıyla paylaşmak çok fazla üzüntüye neden oluyorsa, widget'ınızı DOM’tan çıkarmak mümkün mü? Neden, evet - evet yapabilirsin.

özet

Üçüncü taraf bir JavaScript uygulaması için, yayıncının sayfasına HTML ve CSS enjekte etmek, “güvenli” bir çevreye işaret ekleyerek daha fazla dikkat gerektirir. HTML'yi sayfaya çıktılarken, sayfanın bir engelleme işlemi ile yavaşlatılmadığından emin olmalısınız. Ayrıca, komut dosyanızın aynı sayfaya birden çok kez eklenmiş olabileceğini ve birden çok örneği zarif bir şekilde oluşturması gerektiğini düşünmeniz gerekir. Ek olarak, yayıncıların sayfasına CSS'yi enjekte etmek için en iyi yöntemi seçmelisiniz. Bu, ya tüm stillerinizi belirtmek, bağlantı elemanlarını eklemek ya da CSS kurallarını JavaScript'inize eklemek.

Ancak sayfada sadece HTML ve CSS almak yeterli değil. DOM'a tanıttığınız öğelerin ana sayfa ile çakıştığını bilmeniz gerekir. Ayrıca, stillerinizin yayıncı tarafından tanımlanan mevcut stillerle nasıl çakışabileceğini de düşünmelisiniz. Ana stillerinizin widget'ınız üzerindeki etkisini azaltmak için çeşitli teknikler kullanabilirsiniz: CSS kurallarınızı aşarak veya içeriğinizi iframe arkasında sunarak, isterse daha az bir iframe olsun veya harici bir HTML belgesi içeren bir teknik kullanabilirsiniz.

Üçüncü taraflar için CSS ve HTML üretirken hangi teknikleri kullanıyorsunuz? Hiç geri dönsün mü önemli? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, görüntüyü savunma Shutterstock üzerinden.