CSS Hackleri

☀ Yeni başlayanlar için yararlı olabileceğini düşündüğüm kısa CSS parçacıklarından oluşan bir koleksiyon.

CSS konusunda deneyimliyseniz, bu ipuçlarının ve püf noktalarının çoğunu daha önce görmüş olacaksınız, ancak kim bilir belki daha önce görmediğiniz bir veya iki tane bulabilirsiniz.

Unicode sınıfları: Html'nizdeki sınıf adları için unicode karakterleri kullanabilir ve hatta aynı karakterlere sahip CSS seçicileri yazabilirsiniz.

.♫ { background: #222; color: #FFF; }

.ಠ_ಠ { background: #ccc; color: #fff; }

WebKit tarayıcıları için giriş taslağını kaldırma

• input[type="text"]:focus { outline: none; }

Ve turuncu anahat artık görünmeyecek.

• Tüm büyük tarayıcılarda opaklık

Bildiğiniz gibi eski tarayıcıların opaklığı veya saydamlığı kontrol etmenin farklı yolları vardır.

div { opacity:0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE8 */ filter: alpha(opacity=40); /* IE 5-7 */ }

• Mülkiyet metni-dekorasyon artık bir kısaltmadır

a { text-decoration: overline red wavy; }

Şu anda yalnızca Firefox'ta çalışıyor.

Arka planda yeni değerler

• Tüm arka plan özellikleri için doğru sözdizimi şunlardır:

div { background: [background-image]

                  [background-position]

                  [/ background-size]

                  [background-repeat]

                  [background-attachment]

                  [background-origin]

                  [background-clip]

                  [background-color];

}

• CSS kullanarak yazdırmak için sayfa sonlarını belirleme

.page-break { page-break-before: always; }

p { text-transform: capitalize; }

• Tutarlı temel yazı tipi boyutu

body { font-size:62.5%; }

Yazı tipi boyutu özelliğini gövdede %62,5 olarak ayarlamak, 1em'i 10 piksele eşit yapar.

• CSS'DEN HTML öznitelik değerlerini okuma

a:hover:after { content: attr(title); }

• Webkit tarayıcılarını hedeflemek için tek satırlık

.selector:not(*:root) { property:value; }

• Webkit tarayıcılarını hedeflemek için bir Medya Sorgusu

@media screen and (-webkit-min-device-pixel-ratio:0) {

                     .selector { property:value;

} }

• Internet Explorer'ın eski sürümlerini hedefleyin

IE8 ve daha eski sürümleri kolayca hedefleyin. Evet, 2014 olduğunu biliyorum ama son zamanlarda bu hack'i kullandım -_-

.element { color: black;

           color: green\9; /* IE8 and older */

           *color: blue; /* IE7 and older */

           _color: red; /* IE6 and older */ }

• Tüm tarayıcılardaki tüm paragraflara 10 piksellik bir sol kenar boşluğu ekleyin (Opera 9 ve aşağıda)

p { margin-left: 10px; } html:first-child p { margin-left: 0; }

☀ Başka iyi olanları biliyorsanız, lütfen benimle iletişime geçin.