HTML'nin DNA'sını CSS Özellik Seçicilerle Ekleme
Yayınlanan: 2022-03-10Kariyerimin çoğu için, nitelik seçiciler bilimden daha sihirli olmuştur. Hiçbir şey anlamadan, bir baskı stili sayfasında bir bağlantı çıktısı almak için CSS'ye bakardım. Görevli bir şekilde kopyalar ve baskı stil sayfama yapıştırırdım, ardından en büyük yanan çöp yığını olan projeyi ortaya çıkarmak için koşardım.
Ancak artık CSS öznitelik seçicilerine boş boş bakmanıza gerek yok. Bu makalenin sonunda, bunları sitenizde tanılama yapmak, aksi takdirde çözülemeyecek sorunları düzeltmek ve sihir gibi hissettirecek kadar gelişmiş teknolojik deneyimler oluşturmak için kullanacaksınız. Çok fazla söz verdiğimi düşünebilirsiniz ve haklısınız, ancak nitelik seçicilerin gücünü anladığınızda, kendinizi abartıyormuş gibi hissedebilirsiniz.
En temel düzeyde, bir HTML özniteliğini köşeli parantez içine alır ve buna şöyle bir öznitelik seçici diyorsunuz:
[href] { color: chartreuse; } Bir href sahip olan ve daha spesifik bir seçiciye sahip olmayan herhangi bir öğenin metni artık sihirli bir şekilde chartreuse'a dönüşecek. Nitelik seçici özgüllüğü sınıflarla aynıdır.
Not : CSS özgüllüğü olan kafes eşleşmesi hakkında daha fazla bilgi için “CSS Özgüllüğü: Bilmeniz Gerekenler” veya Star Wars'u seviyorsanız: “CSS Özgüllük Savaşları” bölümünü okuyabilirsiniz.
Ancak öznitelik seçicilerle çok daha fazlasını yapabilirsiniz. Tıpkı DNA'nız gibi, her türlü nitelik kombinasyonunu ve değerini seçmenize yardımcı olacak yerleşik bir mantığa sahiptirler. Yalnızca bir etiket, sınıf veya kimlik seçicinin yapacağı şekilde tam eşleşme yerine, herhangi bir özniteliği ve hatta öznitelikler içindeki dize değerlerini eşleştirebilirler.
Özellik Seçimi
Öznitelik seçiciler kendi başlarına yaşayabilir veya daha spesifik olabilir, yani bir title özniteliğine sahip tüm div etiketlerini seçmeniz gerekiyorsa.
div[title]Ancak, aşağıdakileri yaparak bir başlığı olan div'lerin alt öğelerini de seçebilirsiniz:
div [title]Açık olmak gerekirse, aralarında boşluk olmaması, özniteliğin aynı öğe üzerinde olduğu anlamına gelir (tıpkı boşluksuz bir öğe ve sınıf gibi) ve aralarındaki boşluk, alt öğe seçici anlamına gelir, yani öğenin özniteliğe sahip olan alt öğelerinin seçilmesi.
Niteliklerin değerleri de dahil olmak üzere nitelikleri nasıl seçtiğiniz konusunda çok daha ayrıntılı bilgi alabilirsiniz.
div[title="dna"]Yukarıdakiler, tam bir "dna" başlığına sahip tüm div'leri seçer. Bu durumların her birini (ve daha fazlasını) ele alan seçici algoritmalar olsa da, "dna harikadır" veya "dnamutasyon" başlığı seçilmez. Yakında bunlara geleceğiz.
Not : Çoğu durumda öznitelik seçicilerde tırnak işaretleri gerekli değildir, ancak netliği artırdığına ve uç durumların uygun şekilde çalışmasını sağladığına inandığım için bunları kullanacağım.
"Benim güzel DNA'm" veya "Dna mutasyona uğramak eğlencelidir!" gibi boşluklarla ayrılmış bir listeden "dna"yı seçmek isterseniz. eşittir işaretinin önüne bir tilde veya "dalgalı" diyebileceğim şekilde ekleyebilirsiniz.
div[title~="dna"]“Dontblamemeblamemydna” veya “aptallığı-yetiştirme-değil-dna'sındandır” gibi başlıkları seçebilir ve ardından başlığın sonuyla eşleştirmek için dolar işaretini $ kullanabilirsiniz.
[title$="dna"]"dnamutants" veya "dna-splicing-for-all" başlıkları gibi bir öznitelik değerinin ön tarafını eşleştirmek için bir düzeltme işareti kullanın.
[title^="dna"]Tam bir eşleşmeye sahip olmak yardımcı olsa da, bir seçim için çok dar olabilir ve şapka önü eşleşmesi ihtiyaçlarınız için çok geniş olabilir. Örneğin, bir “şecere” başlığı seçmek istemeyebilirsiniz, ancak yine de hem “gen” hem de “gen-veri”yi seçin. Boru karakteri (veya dikey çubuk) tam da budur; tam bir eşleşme yapar, ancak tam eşleşmenin ardından tire geldiğini içerir.
[title|="gene"]Son olarak, herhangi bir alt diziyle eşleşecek bir tam arama özniteliği operatörü vardır.
[title*="dna"]Ancak bunu akıllıca kullanın, çünkü yukarıdakiler "nadir etimi-dna'mı-gibi-gibi" ile "edna", "kaçırma" ve "echidnas" (Edna'nın gerçekten yapmaması gereken bir şey) ile eşleşecektir. )
Bu öznitelik seçicileri daha da güçlü yapan şey, istiflenebilir olmalarıdır; bu, birden çok eşleşen faktöre sahip öğeleri seçmenize olanak tanır.
Ama bir başlığı olan ve "genler" ile biten bir sınıfı olan a etiket bulmanız gerekiyor? İşte nasıl:
a[title][class$="genes"]Yalnızca bir HTML öğesinin niteliklerini seçmekle kalmaz, aynı zamanda sözde "bilim" (sözde öğeler ve içerik bildirimi anlamına gelir) kullanarak mutasyona uğramış genlerini yazdırabilirsiniz.
<span class="joke" title="Gene Editing!">What's the first thing a biotech journalist does after finishing the first draft of an article?</span> .joke:hover:after { content: "Answer:" attr(title); display: block; }Yukarıdaki kod, fareyle üzerine gelindiğinde yazılmış en kötü şakalardan birinin cevabını gösterecektir (evet, kendim yazdım ve evet, buna “şaka” demek cömert olmaktır).
Bilinmesi gereken son şey, öznitelik aramalarını büyük/küçük harfe duyarlı hale getirmek için bir bayrak ekleyebileceğinizdir. Kapanış köşeli parantezinden önce bir i eklersiniz.
[title*="DNA" i]Ve böylece "dna", "DNA", "dnA" ve diğer varyasyonlarla eşleşir.
Bunun tek dezavantajı, i yalnızca Firefox, Chrome, Safari, Opera ve çeşitli mobil tarayıcılarda çalışmasıdır.
Şimdi öznitelik seçicilerle nasıl seçim yapılacağını gördüğümüze göre, bazı kullanım durumlarına bakalım. Bunları iki kategoriye ayırdım: Genel Kullanımlar ve Teşhis .
Genel Kullanımlar
Giriş Türüne Göre Stil
Giriş türlerini farklı şekilde biçimlendirebilirsiniz, örneğin e-posta ve telefon.
input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }Telefon Bağlantılarını Görüntüle
Bir telefonda aramayı kolaylaştırmak için bir telefon numarasını belirli boyutlarda gizleyebilir ve bunun yerine bir telefon bağlantısı görüntüleyebilirsiniz.
span.phone { display: none; } a[href^="tel"] { display: block; }Dahili ve Harici Bağlantılar, Güvenli ve Güvenli Olmayan Bağlantılar
Dahili ve harici bağlantılara farklı davranabilir ve güvenli bağlantılara güvenli olmayan bağlantılardan farklı şekilde stil verebilirsiniz.
a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }Simgeleri İndir
HTML5'in bize verdiği bir özellik, tarayıcıya, onu açmaya çalışmak yerine o dosyayı indirmesini söyleyen “indirme” idi. Bu, insanların erişmesini istediğiniz ancak şu anda açılmasını istemediğiniz PDF'ler ve DOC'lar için kullanışlıdır. Ayrıca arka arkaya çok sayıda dosya indirmek için iş akışını kolaylaştırır. download özniteliğinin dezavantajı, onu daha geleneksel bir bağlantıdan ayıran varsayılan bir görsel olmamasıdır. Genellikle istediğiniz budur, ancak olmadığında aşağıdaki gibi bir şey yapabilirsiniz.
a[download]:after { content: url(download-arrow.svg); }Dosya türlerini PDF ile DOCX ve ODF gibi farklı simgelerle de iletebilirsiniz.
a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }Ayrıca, öznitelik seçiciyi istifleyerek bu simgelerin yalnızca indirilebilir bağlantılarda olduğundan emin olabilirsiniz.
a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }Eski/Kullanımdan Kaldırılan Kodu Geçersiz Kıl veya Yeniden Uygula
Hepimiz eski kodu olan eski sitelerle karşılaşmışızdır, ancak bazen kodu güncellemek, altı bin sayfada yapmak için harcayacağınız zamana değmez. HTML5'ten önce nitelik olarak uygulanan bir stili geçersiz kılmanız veya hatta yeniden uygulamanız gerekebilir.
<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }Belirli Satır İçi Stilleri Geçersiz Kıl
Bazen işleri karıştıran satır içi stillerle karşılaşırsınız, ancak bunlar sizin kontrolünüz dışındaki kodlardan gelir. Bunları değiştirebiliyorsanız bunun ideal olacağı söylenmelidir, ancak değiştiremezseniz işte bir geçici çözüm.
Not : Geçersiz kılmak istediğiniz özelliği ve değeri tam olarak biliyorsanız ve göründüğü her yerde geçersiz kılınmasını istiyorsanız bu en iyi sonucu verir.
Bu örnekte, öğenin kenar boşluğu piksel cinsinden ayarlanmıştır, ancak kullanıcı varsayılan yazı tipi boyutunu değiştirirse öğenin doğru şekilde yeniden ayarlanabilmesi için genişletilmesi ve em s cinsinden ayarlanması gerekir.
<divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; } Not : Bu yaklaşım çok dikkatli kullanılmalıdır, sanki bu stili geçersiz kılmanız gerekirse !important bir savaşa girecek ve yavru kedi ölecekmiş gibi.
Dosya Türlerini Gösterme
Bir dosya girişi için kabul edilebilir dosyaların listesi varsayılan olarak görünmezdir. Tipik olarak, bunları açığa çıkarmak için bir sözde öğe kullanırdık ve çoğu input etiketinde (veya Firefox veya Edge'de hiç) sözde öğeler yapamasanız da, bunları dosya girişlerinde kullanabilirsiniz.
<input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }HTML Akordeon Menüsü
İyi tanıtılmamış details ve summary etiket ikilisi, yalnızca HTML ile genişletilebilir/akordeon menüler yapmanın bir yoludur. Ayrıntılar, hem summary etiketini hem de akordeon açıkken görüntülemek istediğiniz içeriği sarar. Özete tıklamak detail etiketini genişletir ve bir açık nitelik ekler. open özniteliği, açık bir details etiketine kapalı bir details etiketinden farklı şekilde stil vermeyi kolaylaştırır.
<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details> details[open] { background-color: hotpink; }Bağlantıları Yazdırma
URL'leri baskı stillerinde göstermek, öznitelik seçicileri anlama konusunda beni bu yola yönlendirdi. Şimdi onu nasıl inşa edeceğinizi bilmelisiniz. Yalnızca href a tüm etiketleri seçin, sözde öğe ekleyin ve bunları attr() ve content kullanarak yazdırın.
a[href]:after { content: " (" attr(href) ") "; }Özel Araç İpuçları
Özel araç ipuçları oluşturmak, özellik seçicilerle eğlenceli ve kolaydır (tamam, benim gibi bir inekseniz eğlenceli, ancak her iki şekilde de kolay).
Not : Bu kod sizi genel çevrede bulacaktır, ancak sitenizin ortamına ve benden daha iyi bir zevke sahip olup olmamanıza bağlı olarak boşluk, dolgu ve renk şemasında bazı ince ayarlara ihtiyaç duyabilir.
[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }Erişim Tuşları
Web ile ilgili harika şeylerden biri, bilgiye erişmek için birçok farklı seçenek sunmasıdır. Nadiren kullanılan bir özellik, bir erişim anahtarı ayarlama yeteneğidir, böylece o accesskey doğrudan bir tuş kombinasyonu ve erişim anahtarı tarafından ayarlanan harf aracılığıyla accesskey (tam tuş kombinasyonu tarayıcıya bağlıdır). Ancak bir web sitesinde hangi tuşların ayarlandığını bilmenin kolay bir yolu yoktur.
Aşağıdaki kod, bu tuşları :focus üzerinde gösterecektir. hover gelindiğinde kullanmıyorum çünkü çoğu zaman accesskey ihtiyaç duyan insanlar fareyi kullanmakta sorun yaşayanlardır. Bunu ikinci bir seçenek olarak ekleyebilirsiniz, ancak tek seçenek olmadığından emin olun.
a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }teşhis
Bu seçenekler, oluşturma işlemi sırasında veya sorunları düzeltmeye çalışırken yerel olarak sorunları belirlemenize yardımcı olmak içindir. Bunları üretim sitenize koymak, hataların kullanıcılarınıza yapışmasına neden olur.
Kontrolsüz Ses
audio etiketini çok sık kullanmıyorum, ancak kullandığımda genellikle controls özniteliğini eklemeyi unutuyorum. Sonuç: hiçbir şey gösterilmiyor. Firefox'ta çalışıyorsanız, bu kod, gizlenen bir ses öğeniz olup olmadığını veya sözdizimi veya başka bir sorunun görünmesini engelleyip engellemediğini anlamanıza yardımcı olabilir (yalnızca Firefox'ta çalışır).
audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }Alternatif Metin Yok
Alt metin içermeyen görseller bir lojistik ve erişilebilirlik kabusu. Sadece sayfaya bakarak bulmak zor, ancak bunu eklerseniz hemen ortaya çıkarlar.
Not : Kenarlıklar öğenin genişliğini artırabileceği ve düzeni bozabileceği için kenarlık border anahat outline . outline genişlik eklemez.
img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }Asenkron Javascript Dosyaları
Web sayfaları, Ted'in (üç hücre üzerinde oturan) tatilde site kapalı olduğu ve patronunuzdan korktuğu için yazdığı içerik yönetim sistemleri, eklentiler, çerçeveler ve kodlardan oluşan bir holding olabilir. Hangi JavaScript'in eşzamansız olarak yüklendiğini ve neyin olmadığını bulmak, sayfa performansını nerede iyileştireceğinize odaklanmanıza yardımcı olabilir.
script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }Javascript Olay Öğeleri
JavaScript dosyanıza yeniden yansıtmak için JavaScript olay özniteliğine sahip öğeleri de vurgulayabilirsiniz. Burada OnMouseOver özniteliğine odaklandım, ancak JavaScript olay özniteliklerinden herhangi biri için çalışıyor.
[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }Gizli Öğeler
Gizli öğelerinizin veya gizli girdilerinizin nerede yaşadığını görmeniz gerekiyorsa, bunları aşağıdakilerle gösterebilirsiniz:
[hidden], [type="hidden"] { display: block; }Ancak tüm bu inanılmaz yeteneklerle birlikte bir avlanma olması gerektiğini düşünüyorsunuz. Elbette öznitelik seçiciler yalnızca Chrome'da işaretlendiğinde veya Safari'nin Kenarında Fiery Foxes'ın gece yapılarında işaretlendiğinde çalışmalıdır. Bu gerçek olamayacak kadar iyi. Ve ne yazık ki, bir yakalama var.
En sevilen tarayıcılarda, yani IE6'da öznitelik seçicilerle çalışmak istiyorsanız, yapamazsınız. (Sorun değil; bırak gözyaşları aksın. Yargılama yok.) Hemen hemen her yere gitmekte fayda var. Nitelik seçiciler, CSS 2.1 spesifikasyonunun bir parçasıdır ve bu nedenle, on yılın daha iyi bir kısmı için tarayıcılarda olmuştur.
Dolayısıyla bu seçiciler artık sizin için sihirli değil, yeterince gelişmiş bir teknoloji olarak ortaya çıkmalı. Sihirden çok bilimdirler ve artık onların en derin sırlarını bildiğinize göre, bu size kalmış. Gidin ve internette gizemli bilim harikaları üzerinde çalışın.