alexa  Menu
css and html

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

  03.09.2014 ,   1 yorum ,   7.359 kez okundu.

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

1 yorum yapılmış

    CSS3 selectors – seçiciler 4

    […] Ayrıca bu konuya ait bir örneği daha önce paylaşmıştım. İncelemek isterseniz CSS ile bağlantının PDF dosyası olduğunu belirleme başlıklı yazımı okumanızda fayda var diye düşünüyorum […]

    12.05.2018, 19:23:34

Yorum yapın..

isim yerine gerçek isim ve soyisim yazılmadan yapılan yorumlar kesinlikle onaylanmıyor bilginiz olsun.


The reCAPTCHA verification period has expired. Please reload the page.