CSS ile bağlantının PDF dosyası olduğunu belirleme

Sayfalarımızda genelde PDF dosyalarına linkler veriyoruz. Fakat kullanıcı linke tıklayınca karşısına ne çıkacağını genelde bilmez. Tıkladıktan sonra karşısına çıkacak sayfanın PDF olması bazen rahatsız edebilir. Örneğin mobil kullanıcıysa ve PDF dosyamızın boyutu yüksekse o zaman arkamızdan konuşmuş da olabilir hani 🙂

İşte bu sorunu ortadan kaldırmak için bir tekniği sizlerle paylaşmış olayım.

Şöyle bir linkimizin olduğunu varsayalım:

<p>Örneğin bu bizim pdf dosyamıza giden bir <a href="some.pdf">bağlantı</a> olsun.</p>

Burada bağlantımız some.pdf adlı bir dosyaya yönlendirilmiş. Şimdi istediğimiz şu ki “bağlantı” kelimesindan sonra parantez içerisinde PDF yazılsın. Yani şöyle bir sonuç olsun:

Örneğin bu bizim pdf dosyamıza giden bir bağlantı (PDF) olsun.

Bunun için css dosyamıza aşağıdaki kodları yazmamız gerekiyor:

/* PDF dosyalarına yönlendirilmiş bağlantılardan sonra "(PDF)"  yazısını göster */
a[href$=".pdf"]:after { content: " (PDF)"; }

Bu kadarı bize yetmeyebilir. Örneğin (PDF) yazısının yanına bir de PDF dosyamızın boyutunu da girmek isteyebiliriz.
Şöyle bir sonuç ortaya çıksın istiyoruz diyelim:

Örneğin bu bizim pdf dosyamıza giden bir bağlantı (PDF, 2 MB) olsun ve bağlantının boyutunu da girmiş olalım.

O zaman HTMl kodlarımız şöyle olmalı:

/* PDF dosyalarına yönlendirilmiş bağlantılardan sonra "(PDF)"  yazısını göster */
a[href$=".pdf"]:after { content: " (PDF)"; }

İlk yazdığımız koddan tek farkı a (link) etiketi içerisine data-size=”2 MB” veri niteliğini dagil etmemiz.

Daha sonra bir de CSS dosyamızda aşağıdaki kodları yazmamız gerekecek:

/* Eğer bağlantılarda veri niteliği kullanılarak dosya boyutu belirtilmişse aşağıdaki gibi göster */
a[href$=".pdf"][data-size]:after { content: " (PDF, " attr(data-size) ")"; }

Evet bu küçücük işlemi tamamlayarak ziyaretçilerimize daha kullanışlı ve bilgi dolu bir sayfa hazırlamış oluruz.

Uygulamayı buradan görüntüleyebilirsiniz.

Umarım faydalı olmuştur. Derslerin devamı için sayfayı sosyal ağlarda paylaşarak destek olursanız sevinirim.

Kaynak: http://bit.ly/1lyPvBv