CSS öncesi - orijinal, kullanışlı, pratik

Sözde öğeler ve CSS sahte sınıfları: önce, sonra, fareyle üzerine gelin, etkin vb. - karmaşık tepki tasarımı kararları, olay unsurları, diyaloglar ve ziyaretçi eylemleri gerektirmeyen bariz JavaScript işleyicileri kodunda yer almayan, sitenin niteliklerini iyileştirmek ve basitleştirmek için etkili bir fırsat.

Sözde elemanlar, basit ve karmaşık yazarın fikirleri için kullanışlı, çok fonksiyonlu, önemli ve çok değişkenli özelliklere sahiptir: özgün bir şekilde dikkat çekmek, belirsiz bir şekilde eylemleri belirtmek, gerekli ipucunu doğru yerde bulmak.

Büyük perspektifler, sahte elemanın içeriğinde url () belirtildiğinde açılır. Nitekim, bu seçenek hem siteye bir şey indirmek açısından, hem de başka bir yerde bir şeyin etkinleştirilmesi için yeni ufuklar açıyor

Sözde elemanların ayırdedici bir özelliği

Sözde elemanlar (:: before CSS, :: after) öğeler, seçiciler ve sahte sınıflardan farklıdır, çünkü bunlar belge ağacında başlangıçta bulunmazlar. Belki de uygulamada bu özellikle önemli değildir, ancak içeriği sitenin sayfalarına yerleştirme konusunu düşünürsek, içerik mülkiyetine güvenmek, arama motorunun mantıklı olmadığını anlamlıdır.

Sözde elemanlar :: önce CSS elemanından önce içerik eklemenize izin verir ve :: after - after. İçerik, basit metinlerden CSS özelliklerine göre karmaşık biçimlendirmeye kadar değişebilir, ancak HTML etiketleri değişebilir. Bir sahte eleman bağlı olduğu eleman içine kesinlikle yerleştirilebilir, çünkü öncesi ve sonrası anlamı göreceli ve hareketlidir. Yalnızca konumu değil, boyutları, renkleri, arka planları, yazı tiplerini ve diğer CSS özelliklerini de belirleyebilirsiniz.

CSS sahte sınıfları gibi, öncesi ve sonrası ":" sembolünün önüne ancak CSS3 standardına göre "::" önerilir. Sayfadaki belirli bir kullanımın test edilmesi asla gereksiz olacaktır: bazı tarayıcılar veya sürümleri yalnızca bu veya sözde öğeyi fark etmeyebilir.

Genel Kullanım Şartları

Örneğin, CSS = 'scElement' açıklamasına ve sayfadaki 'Element' içeriğine sahip bir div öğesi stil sayfasında CSS açıklaması belirterek:

.scElement {
POZİSYON ...;
Z-index ...;
...

}

Buna ": hover" sözde sınıfı ve ":: before" CSS sahte elemanı uygulayabilirsiniz:

.scElement: hover :: before {içerik: 'önek'; Renk ...; Arka plan rengi ...;}.

Ardından, farenizi 'Eleman' kelimesinin üzerine getirdiğinizde, harflerin ve arka planın renklerinin değişeceği "önek" sözcüğü görünecektir.

Sözde element içeriğinin varyantları

Yalancı öğede özellikler belirtmezseniz, ana öğe - scElement ile aynı kalacaktır. Bir url belirtebilirsiniz ve sonra içeriğin üzerine geldiğinizde content: url ('/ scBox / rm-v / sc-rights.png') özelliği elemanın resmini işaret edecektir. "\ 03B1" içeriğinde: " alfa " matematiksel simgesi görünecek , ancak "& nbsp;", "& lt;", "& laquo;", "& raquo;" gibi özel karakterler kullanılacaktır. Ve diğerleri olmamalıdır - onlar olduğu gibi gösterilecektir.

Düz metin, url (), onaltılık sembol dizisi, açık-quote / close-quote ya da no-open-quote / no-close-quote vb. Notasyonu gibi sözde elemanların içeriğini belirlemek için pek çok seçenek vardır. Mutlak bir içerik konumu belirtmek mümkün olduğu için Stil özellikleri aracılığıyla, daha önce uygulanarak CSS, takma elemanın eklendiği öğenin herhangi bir yerine yerleştirilmesine izin verir.

Önceden ve sonrası eşzamanlı kullanımını birleştirebilirsiniz. Bu nedenle, sembolleri içerikten önce CSS ile yerleştirerek, farklı efektler elde edebilirsiniz ve farklı sahte sınıfları ve sözde öğeleri birleştirerek ziyaretçiyi JavaScript kodunun tek bir baytına harcamaksızın şaşırtın.

Sözde elemanların özellikleri

Onların atanması için, ":" sembolü yanı sıra sahte sınıflar için de kullanılır, ancak CSS3'te sözde elemanların ayrımı genellikle "::" olarak adlandırılır. Bunu anlayan tarayıcılar, her iki işareti de algılarlar. Kayıttaki boşluklara izin verilmiyor, sözde sınıfın ve (veya yalnızca) sahte elemanın kaydedildiği dize birlikte yazılır:

ScElement: hover :: before {içerik: 'önek'; ...}

ScElement: etkin: after {content: 'son ek'; ...}

Unutmamamanız önemlidir: CSS önce sitenin içeriği dışında çalışır. Stiller, sayfanın içeriğiyle alakalı değildir. Sözde elemanlar bir istisna değildir. DOM ağacında bulunmazlar ve sitenin önemli bölümlerinde kullanmak istenmez; içeriğe dahil edilmezler.

":" Ve "::" kullanımı mobil platformlar ve modern tarayıcılar tarafından desteklenir, ancak eski sürümlerdeki çalışmaları kontrol etmek genellikle gereksizdir.

Sahte elemanın içeriği sitenin içeriğine dahil değildir. Arama motorları tarafından görülmeyecek. Bu durumu nasıl kullanacağınız belirli duruma bağlıdır, ancak içeriği bir url () olduğunda CSS'yi bağımsız olarak veya karmaşık olarak önce ve sonra kullanmak ilginçtir. Sahte elemanın içeriğinin doğrudan kullanımı, siteye bir bağlantı olarak, örneğin bir resimden bir dosya indirmenize izin verir.

Sitedeki stil dosyalarını değiştirme yeteneği (istisna değil basamaklı stil sayfası dosyaları), ziyaretçinin eylemlerine bağlı olarak, algoritmanın doğru yerinde belirli bir zamanda uygun olarak sahte elemanlar oluşturulmasını ve kullanılmasını engellemez.