CSS Tespit

Css-Tricks’de gördüm her ne kadar 2010’un konusuda olsa, gayet mantıklı geldi 🙂 Bazen bazı elemanları tespit etmemiz gerekebilir.. Örneğin değeri olmayan elemanları, nitelikleri boş olan elemanları, şuanda kaldırılmış olan ama bizim hala kullandığımız elemanları gibi.. İşte bu gibi durumlarda bu css kodlarını kullanabilirsiniz.. Böylece tespitiniz daha kolay olur 🙂

/* Boş Elemanlar */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
{ padding: 20px; border: 5px dotted yellow !important; }

/* Boş Nitelikli Elemanlar */
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
{ border: 5px solid yellow !important; }

/* Kaldırılmış Elemanlar */
applet, basefont, center, dir, font, isindex, menu, s, strike, u
{ border: 5px dotted red !important; }

/* Kaldırılmış Nitelikli Elemanlar */
*[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start],
*[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink],
*[align], *[valign],
*[hspace], *[vspace],
*[height], *[width],
ul[type], ol[type], li[type]
{ border: 5px solid red !important; }

/* Kullanımı Önerilmeyen Elemanlar */
input[type="button"], big, tt
{ border: 5px dotted #33FF00 !important; }

/* Kullanımı Önerilmeyen Nitelikli Elemanlar */
*[border], a[target], table[cellpadding], table[cellspacing], *[name]
{ border: 5px solid #33FF00 !important; }

Ve tabi birde eric reyizin hazırlamış olduğu versiyonu mevcut, dileyenler bunuda kullanabilirler;

div:empty, span:empty,
li:empty, p:empty,
td:empty, th:empty {padding: 0.5em; background: yellow;}

*[style], font, center {outline: 5px solid red;}
*[class=""], *[id=""] {outline: 5px dotted red;}

img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}
img[title=""] {outline: 3px dotted fuchsia;}
img:not([title]) {outline: 5px solid fuchsia;}

table:not([summary]) {outline: 5px solid red;}
table[summary=""] {outline: 3px dotted red;}
th {border: 2px solid red;}
th[scope="col"], th[scope="row"] {border: none;}

a[href]:not([title]) {border: 5px solid red;}
a[title=""] {outline: 3px dotted red;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS Tespit” üzerine 4 yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir