Çok Kullanılan CSS Seçicileri

1. *: Bu #container div öğesinin altındaki her bir çocugu hedefleyecektir.
#container * {
 border: 1px solid black;
}

2. X Y: Descendant(torun)seçicisidir. Seçicilerinizde daha spesifik olmanız gerektiğinde bunları kullanırsınız
li a {
  text-decoration: none;
}

3. X:visited and X:link: Tıklanmamış tüm link etiketlerini :link hedefler ve :visited ise tıklanılmış linkleri hedefler.
a:link { color: red; }
a:visted { color: purple; }

4. X + Y: Komşu seçici denir. Yalnızca önceki öğenin hemen sonrasında bulunan öğeyi seçer. Ör: her ul'den sonraki sadece ilk paragrafı metnini kırmızı yapar.
ul + p {
   color: red;
}

5. X > Y: Standart X Y ile arasındaki fark, direk çocukları seçecektir. Ör: Sadece container içerisindeki ul'ler hedeflenir, li içerisindeki ul'ler hedeflenmez. İçtekileri de hedeflemek için div#container ul kullanılır.
div#container > ul {
  border: 1px solid black;
}
<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

6. X ~ Y: X + Y yanlnızca ilk seçicinin hemen sonrasındaki seçerken X ~ Y ile seçicin sonrasındaki sıra farketmeksizin tümünü seçer.
ul ~ p {
   color: red;
}

7. X[title]: Nitelik seçicidir. Ör:Yalnızca bir title(başlık) özelliğine sahip olan link etiketleri seçecektir.a[title] {
   color: green;
}

8. X[href="foo"]: href niteliği "foo" olan elementler hedeflenir.
a[href="https://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

9. X[href*="nettuts"]: Yıldız tırnak içindeki değerin özelliğin içinde bir herhangi bir yerde bulunması gerektiğini belirtir. Dizenin başını ve sonunu işaretlemek için ^ ve $ kullanılır. ^ ile belirttiğimiz kelime ile başlayanları, # ile ise belirttiğimiz kelime ile bitenleri seçtirtebiliriz.
a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

10. X[href$=".jpg"]: sonu .jpg ile biten href içeriklerine göre elementleri hedefler.
a[href$=".jpg"] {
   color: red;
}

11. X[foo~="bar"]: Hedeflenen içeriklerde "bar" dizesinin geçmesi seçmek için yeterlidir. Ör: <a href="path/image.jpg" data-info="external image"> Click Me, Fool </a>
a[data-info~="external"] {
   color: red;
}

12. X:checked: Bu takma sınıf, aktif hale gelen bir kullanıcı arabirimi öğesini (bir radyo düğmesi veya onay kutusu gibi) hedefleyecektir. Ör: radio seçildiğinde ilk öğesi olan label mavi olur.
input[type=radio]:checked + label {
          color: blue;
}

13. X:after: Önce(before) ve sonra(after) takma sınıfları superdir. Seçilen öğenin etrafında içerik oluşturmaya olanak sağlarlar.
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
 
.clearfix { 
   *display: inline-block; 
   _height: 1%;
}

14. X:hover: Bir öğenin üzerine fare ile gelindiğinde çalışır.
div:hover {
  background: #e3e3e3;
}

15. X:not(selector): Ör id'si container olan div'ler dışındaki bütün div'leri seçmek için
div:not(#container) {
   color: blue;
}

16. X::pseudoElement:Pseudo elemanlarını(:: ile belirlenir) kullanarak bir öğenin ilk satırı veya ilk harfi gibi belli bir parçasına stil uygulamanızı sağlar.
p::first-letter { //paragrafın ilk harfi hedeflenir.
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

p::first-line { //Paragrafın İlk Satırını Hedefleyin
   font-weight: bold;
   font-size: 1.2em;
}

17. X:nth-child(n): Liste elemanını hedeflemek için kullanılır. Ör: 3.li gibi
li:nth-child(3) {
   color: red;
}

18. X:nth-last-child(n): Liste elemanını sondan hedeflemek için kullanılır. Ör: sondan 3.li gibi
li:nth-last-child(2) {
   color: red;
}

19. 24. X:nth-of-type(n): Elemanın türüne(type) göre seçmede kullanılır. Ör: Sadece içinçi ul hedeflenir.
ul:nth-of-type(3) {
   border: 1px solid black;
}

20. X:nth-last-of-type(n): Elemanın türüne(type) göre sondan başlayarak seçmede kullanılır.
ul:nth-last-of-type(3) {
   border: 1px solid black;
}

21. X:first-child: Yalnızca öğenin ebeveyninin ilk çocuğunu hedeflememizi sağlar.
ul li:first-child {
   border-top: none;
}

22. X:last-child: Yalnızca öğenin ebeveyninin son çocuğunu hedeflememizi sağlar.
ul > li:last-child {
   color: green;
}

23. X:only-child: Ebeveyninin tek çocuğu olan öğeleri hedeflemenize izin verir. Ör: div içerisinde tek p etiketi olanları hedefler.
div p:only-child {
   color: red;
}

24. X:only-of-type: Ana evebeyn konteyneri içinde kardeşi olmayan öğeleri hedefleyecektir. Örnek olarak, tek bir liste öğesine sahip tüm ul'leri hedef alalım.
ul > li:only-of-type {
   font-weight: bold;
}

25. X:first-of-type: first-of-type, türünün ilk kardeşlerini seçmenize izin verir.
<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>
 
   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>   
</div>

"List Item 2" hedeflemek için;
Çözüm1:Bu kod kısaca, "sayfadaki ilk sırasız listeyi bul, daha sonra yalnızca liste öğeleri olan en yakın olan çocukları bul" diyor. Sonrada, bu bulunan setteki sadece ikinci liste öğesine göre filtreleme yapılıyor.
ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}
Çözüm2:Başka bir seçenek, bitişik seçiciyi kullanmaktır. Bu senaryoda, p etiketinin hemen sonrarsındaki ul'yi buluruz ve daha sonrada öğenin son çocuğunu buluruz.
p + ul li:last-child {
   font-weight: bold;
}
Çözüm3: Sayfadaki ilk ul'ı kapıyoruz ve alttan başlayarak ilk liste öğesini buluyoruz
ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;   
}

 


Javascript Console ekranın küçük karalamalar ;)

Console ekranına geçmek için F12 tuşunun kullanabilirsiniz.

String Interpolation – Console ekranında stilli uyarılar gösterme
%s: string ifadeler
%i: integer ifadeler
%c: custom ifadeler

console.todo = function(msg) {
console.log('%c %s %s %s', 'color: yellow; background-color: black;', '–', msg, '–');
}

console.important = function(msg) {
console.log('%c %s %s %s', 'color: brown; font - weight: bold; text-decoration: underline;', '–', msg, '–');
}

console.todo('This is something that’ s need to be fixed');
console.important("This is an important message");

Liste/Array gibi değerlerin console ekranında tablo olarak gösterilmesi

var animals = [
{ animal: 'Horse', name: 'Henry', age: 43 },
{ animal: 'Dog', name: 'Fred', age: 13 },
{ animal: 'Cat', name: 'Frodo', age: 18 }
];

console.table(animals);

Timer kullanarak js performansını bulma

console.time('Timer1');

var items = [];
for(var i = 0; i < 100000; i++){
items.push({index: i});
}

console.timeEnd('Timer1');

Console temizleme
Console.Clear();

JS .min dosyalarını Unminify olarak görme
ÖR: Chrome browser için F12 tuşu ile console açılır ve soruce sekmesinden her hangi bir min.js file açılır ve pretty print butonu ile kodu düzenli bir şekilde görüntüleyebilirsiniz.

İcon Font /Font Awesome nedir?

İkon Fontları Nedir?
Özel olarak font kullanmak istediğimizde bildiğiniz gibi @font-face yöntemini kullanıyoruz.

Font Awesome
İkon Fontlar arasında en çok kullanılanlardan birisi Font Awesome. Github üzerinden yayınlanan, ücretsiz bir ikon font servisi. http://fortawesome.github.io/Font-Awesome/ adresinden download edebilirsiniz.

Eğer Sass ya da Less kullanıyorsanız gerekli dosyalar sass ve less klasörlerinde. Bizim için css ve font klasörlerini almamız yeterli. Daha sonra index sayfamızda çağırmamız gerekenler şöyle;

<link rel="stylesheet" href="css/font-awesome.min.css" />

Artık istediğimiz ikonu seçip kullanabiliriz.
Örneğin popüler ikonlardan windows ikonunu kullanalım;

<i class="icon-windows"></i>

İsterseniz başka bir nesne ilede kullanabilirsiniz, span gibi.
Animasyonlu İkonlar: Eğer ikonlara animasyon katmak isterseniz 2. bir sınıf olarak “icon-spin” atamanız gerekir.. Yani;

<i class="icon-windows icon-spin"></i>

İkon’a border eklemek: Yuvarlak şekilde düzgün gözükmesi için önceden tanımlı şu sınıfı verebilirsiniz; “icon-border“.. Yani;

<i class="icon-off icon-border"></i>

İkon Boyutları: İkon boyutlarını font-size ile belirleyebileceğiniz gibi, font awesome’ın önceden tanımlı şu sınıflarını da kullanabilirsiniz;
– icon-large
– icon-2x
– icon-3x
– icon-4x
Örnek bir kullanım;

<i class="icon-camera-retro icon-4x"></i>

İkon Döndürme: Rotated & Flipped

<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

İncelemek için tıklayınız.
http://fortawesome.github.io/Font-Awesome/icons/

Css Sprite Tekniği

CSS Sprite Nedir?

CSS Sprite, web sitenizde kullandığınız küçük çaplı görselleri ve ikonları parça parça çağırmak yerine bütün görsellerin bir arada bulunduğu tek bir görsel üzerinden koordinat belirleyerek çağırmamıza yarayan, sitenin yüklenme hızını olumlu anlamda etkileyen bir sistemdir.

CSS Sprite Tekniğinin Avantajları

CSS Sprite tekniği kullanılarak hazırlanan bir web sayfası, bu tekniği kullanmayan aynı web sayfasından daha hızlı yüklenecektir. Çünkü sitede 10 görsel varsa, bu da her biri için sunucuya gönderilecek 10 request demektir. CSS Sprite ile 10 görseli tek bir görsel haline getirirseniz, bu da tek bir request demek olacaktır ki, sayfanızın hızlı yüklenmesini sağlayacaktır.

CSS Sprite Oluşturma

CSS Sprite oluşturmak için iki yol var. Bunlardan biri her bir görseli photoshop gibi bir programla birleştirmek ve yanyana ya da altalta dizdiğiniz bu görsellerin piksel bazında koordinatlarını hesaplamaktır. Tahmin edeceğiniz gibi bu biraz zahmetlidi ve hata şansınız vardır.

Diğer yol ise bu işlem için bir aracı kullanmak. Görsellerin herbirini ayrı ayrı imaj haline getirip, bunları zip formatında sıkıştırarak, CSS Sprite Generator‘a (CSS Tümleşik Resim Üreteci) yükleyelim. Bu servis görselleri tek bir imaj haline getirecek ve görsellerin css kodlarında kullanmak üzere koordinatlarını bize verecektir.

Bu adres ise HTML5 tekniğini kullanan başka bir oluşturucudur. Bilgisayarınızdaki resim dosyalarını sürükle bırak yöntemi ile buraya atabilir, Generate butonuna tıklayarak sağındaki Sprite ile kombine edilmiş tek bir resim dosyasını, Stylesheet ile kullanabileceğiniz css dosyasını görüntüleyebilirsiniz.

CSS Sprite Kullanımı

Yukarıdaki site bize gerekli kodları verecektir ama yine de anlatmakta fayda var. CSS Sprite tekniği ile kodlama yapmak için css’in background özelliği kullanılır.

Örneğin; almak istediğimiz görsel, bütün görselin yukarıdan 10 piksel aşağısında ve soldan 20 piksel solundaysa, css aşağıdaki şekilde kullanılır.

span #sprite {  background-image: url(gorsel.png);  background-position: -10px -20px;}

Alıntıdır… http://sanagrafi.com/css-sprite

CSS Ölçü Birimleri(Göreceli Değerler)

CSS  İçinde kullanılan em,ex,px,% değerleri css içinde kullanılan göreceli değerlerdir.

em: Nesnenin yazı tipinin yüksekliğidir.Sayfanın Font-size değeri 16 px olarak atanmış ise 1 em=16 px‘dir.

Şayet  sayfanın Font-size değeri 12 px olarak atanmış ise 1 em=12 px‘dir.

Zaten font büyüklüğünü belirtmeden bir yazı yazsanız bunun büyüklüğü 16 px’dir.

ex: Hangi yazı tipi seçilmişse o yazı tipindeki küçük x harfinin büyüklüğüdür.Genelde de Font-Size‘in yarısıdır.

px: Ekran çözünürlüğüne göre değişen,ekranda bulunan noktalardan bir tanesinin yüksekliğidir.Standart Monitörlerde inç başına 96 nokta düşer.(DPI-Dot Per Inch)

%: Uygulanan nesneye göre değişen bir değerdir.<body>’nin varsayılan değerine göre kendini ayarlar.

CSS ile seçilen yazıların arkaplan rengini değiştirme

Normalde seçilen yazının arkaplan rengi mavidir fakat bu renk sizin tarayıcılarınızın seçtiği bir renktir.İsterseniz sayfanızın CSS kodlarının içine aşağıda ki kodları kullanarak değiştirebilirsiniz.

/*buradan sayfada yazılar seçilirken arkaplan renginin kırmızı olmasını sağladım başlangıç*/
::-moz-selection {
background: #aa2526;
color: #ffffff;
}
::selection {
background: #aa2526;
color: #fff;
}
a::-moz-selection {
background: #aa2526;
color: #ffffff;
}
a::selection {
background: #aa2526;
color: #ffffff;
}
/*buradan sayfada seçilen arkaplan renklerinin kırmızı olmasını sağlamam bitiş*/

Browser Cache için JS ve CSS File Versiyonlama

Sitemizdeki js,css gibi dosyalar üzerinde değişiklikler yaptığımızda sitemizi güncelleriz fakat bazen browser cachesinden eski file’ı kullanabilir. Ve durum sıkıntı yaratabilir. Bunun önüne geçmek için File Versioning kullanılmalıdır.  versiyonlama işlemine versiyon değerini kendimiz set edebiliriz v=1.0 gibi. fakat bunu her değişiklikte elle yazmak yerine otomatize etmek çok daha mantıklı. Yapmak istediğimiz şey değişiklik yapılan dosyanın son değişiklik zamanını alıp dosya sonuna version olarak eklemek. Tabi Saniyede 50.000 request aldığımızı düşünürsek, her gelen istekte gidip sitede kullanılan css & js dosyalarının son değiştirilme tarihini almaya kalkarsak, bir süre sonra serverlarımız bu yükü kaldıramayabilir. Bunun için ise Data cache kullanılabilir. Bu dosyayı 5dk kadar cachelemek server işlem yükünü azaltacaktır.

Öncelikle Interfacemizi ekliyoruz;

public interface IDefaultCacheManager
{
    object Get(string key);
    void Set(string key, object data, int cacheTime);
    bool IsSet(string key);
    void Invalidate(string key);
}

Cache işlemleri methodlarım

public class DefaultCacheManager : IDefaultCacheManager
{
    private ObjectCache Cache { get { return MemoryCache.Default; } }

    public object Get(string key)
    {
        return Cache[key];
    }

    public void Set(string key, object data, int cacheTime)
    {
        CacheItemPolicy policy = new CacheItemPolicy();
        policy.AbsoluteExpiration = DateTime.Now + TimeSpan.FromMinutes(cacheTime);
        Cache.Add(new CacheItem(key,data),policy);
    }

    public bool IsSet(string key)
    {
        return (Cache[key] != null);
    }

    public void Invalidate(string key)
    {
        Cache.Remove(key);
    }
}

Helper’ım

public static class HtmlHelpers
{
    public static IDefaultCacheManager Cache = new DefaultCacheManager();

    public static string FileVersioning(this HtmlHelper helper, string fileName)
    {
        string cacheKey = fileName;
        object cachedVersion = Cache.Get(cacheKey);
        if (cachedVersion != null)
        {
            return cachedVersion as string;
        }
        else
        {
            var serverFilePath = HttpContext.Current.Server.MapPath(fileName);
            var version = File.GetLastWriteTime(serverFilePath).ToString("yyyyMMddhhmmss");
            Cache.Set(cacheKey, string.Format("{0}?v={1}", fileName, version),5);
            return string.Format("{0}?v={1}", fileName,version);
        }  
    }
}

View içerisinde kullanımı

<script src="@Html.FileVersioning("/Content/jquery-1.8.3.js")"></script>

Conditional Comment Kullanımı

Bu yazımızda şartlı yorum kullanarak sayfamızın kullanacağı css kodunu belirleyeceğiz. Şartlı yorumlarda kod eğer koşulu sağlamıyorsa yorum olarak algılanmaktadır.
Bu sayede hangi css dosyasının kullanılacağını seçebiliyoruz.

<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" /><![endif]-->

Bu durumda kullanıcı ie6 kullanıyorsa style.ie6.css, ie7 kullanıyorsa style.ie7.css diğer tüm tarayıcılar için isestyle.css aktif olacaktır.

Ayrıca <!- -[if lte IE 6]> şeklinde tanımlayarak ie6 ya da daha düşükse olarak tanımlayabiliyoruz.

Not: Bu özelliği sadece internet explorerda kullanabilimekyiz.

 

Target ALL VERSIONS of IE (Tüm İE sürümleri için)

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE (İE harici tarayıcılar için)

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 7 ONLY (İE 7 için)

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER (İE 6 ve alt versiyonları için)

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER (İE 7 ve alt versiyonları için)

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER (İE 6 ve üst versiyonları için)

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

SCRİPT İLE ALMAK İÇİM;

<script>
 $(document).ready(function() {
 if ($.browser.msie)
 {
     if ($.browser.version < 9)
     {
         $('.wrapper').hide();
     }
 }
 });
 </script>

Width ve Height’e göre auto font-size

Bazen sabit boyutlu bir div,span vs. içerisindeki textlerin font-size’larının widthe göre otomatik ayarlanmasına ihtiyaç duyabiliriz. Bunun için;

Html
<div id="fitin">
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

Css
#fitin {
 width: 500px;
 height: 100px;
 overflow: hidden;
 font-size: 1em;
}

JS
$(function() {
 while( $('#fitin div').height() > $('#fitin').height() ) {
 $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
 }
});