Evet sayın pek çok kıymetli ziyaretçilerim, bu gün sizlere oldukça gereksiz bir konudan bahsedeceğim. Hatta tahmin edemeyeceğiniz kadar gereksiz. Şaka bi yana gereksiz değil de bu özelliği kullanan web site sayısı oranlarını hesaplarsanız %00000,1 gibi bir değerle ancak karşılaşırsınız. Kendi sitemde de bu özelliğin aynısı bulunuyor.
Daha önceden görmüş olabileceğinizi zannetmiyorum. Bir web sitesinden yazı, link veya resim kopyalama işlemi esnasında kullanılan bir Css seçicisidir. Web sitelerden içerik çalanların en çok karşılaştığı bir durum olduğunu söyler isek yeridir sanırım. Mouse sol tuşunu basılı tutup sayfada bulunan içerikleri kopyalama işlemi esnasında seçilmiş olan bölümler mavi renkli olur genel olarak. Dünyanın en popüler siteleri dahi bu renk için herhangi bir değişiklik yapma ihtiyacı duymamışlardır. Bence kusursuz tasarım ve farklılık isteyenlerin kullanması gereken basit bir seçicidir.
::selection ve ::-moz-selection seçicilerinin kullanım alanları oldukça dardır. Kopyalanmış olan bölümlerin arka plan rengi ve yazı renginin seçilmemiş olan bölümlerden farklı bir renkte görünmesini sağlarlar. Her zaman tarayıcılar arasındaki uyumsuzluktan ve bundan duyduğum rahatsızlıktan bahsetmişimdir. Bütün tarayıcılar ::selection desteklerken Mozilla sap gibi ::-moz-selection olarak ayarlamış bu değerin kullanılabilmesi için. Tasarım çalışmalarını denemek amaçlı bile kullanmadığım Mozilla tarayıcısı ::-moz-selection yüzünden biraz daha gözüme kötü görünmeye başladı.
::selection, ::-moz-selection kullanımı :
Herhangi bir Css sınıf veya ide seçmeden ::selection {değerler} ve mozilla firefox için de ::-moz-selection {değerler} şeklinde girip kullanmaya başlıyoruz. Değerler kısmında kullanabileceğiniz hepi topu iki tane değer bulunuyor. Yazı renklerini değiştirmek için color ve arkaplan rengini değiştirmek için de background-color değerini kullanabiliyoruz. ::selection için ne eklemiş iseniz ::-moz-selection için de aynı değerleri girmeniz gerekmekte bütün tarayıcılarda aynı şekilde görülebilmesi için. Son olarak söylemeyi unuttuğum bu seçicilerin Css3 ile birlikte gelen yeniliklerden biri olmasıdır.
Örnek Css3 kodu :
::selection {color:red;background:yellow;}
::-moz-selection {color:red;background:yellow;}
Aşağıdaki demonun nasıl çalıştığını görebilmek için musenizi basılı tutup yazı, link ve resmin üzerinde sürükleyerek kopyalamaya çalışın. Siyah olan yazı rengi kopyalandıktan sonra indigo rengine ve arkaplan da açık yeşil rengine dönüşecek.
Ayrıca bu demoyu denerken bu konudaki yazıları da aynı şekilde kopyalamayı deneyebilirsiniz.