Web sayfalarında bazı nedenlerle bazı görseller gösterilemeyebilir, bu durumlarda sayfada resim yerine hiç güzel olmayan bir görüntü oluşur ve biz bu vereceğim CSS kodu ile onu yakışıklı hale getireceğiz.
Peki tüm bunları neden yapıyoruz? Nedeni hem siteyi ziyaret eden kullanıcıları düşündüğümüzü göstermek ve onlara daha iyi bir deneyim sunmak hem de aslında Google algoritmasının bu tür kullanıcı deneyimi ve detaylı geliştirmeleri göz ön ünde bulundurduğunu bilmemiz.
Normal şartlarda sitede eğer bir görsel bozuk/kırık/broken ise şu şekilde görünür;
Bizim yapacağımız CSS geliştirmesi ile aşağıdaki gibi görünecektir;
CSS ile sayfada bulunamayan bozuk/kırık resimlerin daha güzel görünmesi için aşağıdaki kodu kullanabilirsiniz:
img::after{
content: "\2639"" " attr(alt);
display: flex;
justify-content: center;
place-items: center;
align-items: center;
background-color: #fff;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
}Kod içerisindeki “content: "\2639" " " attr(alt);” kısmını dilerseniz kendiniz manuel bir değer atayabilirsiniz, bu haliyle ilgili bozuk görselin “alt="alt bilgi metni"“’ni göstermektedir.
Canlı olarak test etmek için https://broken-img-css.glitch.me/ adresine bakabilirsiniz ve örnek kodlama aşağıda:
Ayrıca bulunamayan görseller konusunda yazdığım şu 3 makaleyi de incelemenizi öneririm:
Güzel kodlamalar dilerim.