İlhami Yılmaz

Bilindiği üzere arkaplan resmi olarak çağırdığımız resimler HTML validasyonundan geçmemekte ve alt etkiketi gibi önemli etiketler kullanılamamaktadır. Her ne kadar kullanacağımız resimleri arkaplan resmi olarak çağırmak, kullanıcı tarafında kesme -biçmeyi engelleyerek büyük kolaylık sağlasa da, sabit yükseklik değeri alma zorunluluğundan dolayı developer'ın üzerine yük bindirmekte ve her media query için ayrı ayrı yükseklik yazdırmak zorunda bırakmaktadır. Zira, artı ve eksileri bir yana dursun, ikisini birlikte kullanmak şu mantık ile daha basittir: Bildiğiniz üzere, Bootstrap kendi içerisinde img-responsive adında bir sınıf barındırmakta, bu sınıf ise resimlerimizi bulunduğu konteyner kadar genişlik verdirerek aynı zamanda da yüksekliğini otomatik olarak hesaplatmaktadır. Bu tutorial, Bootstrap'ın bu özelliğini baz almaktadır. Yapacağımız sistemin mantığı, resmi çağırmak ama boyutlarını kaybetmeden görünmez hale getirmek, ardından da dışına bir konteyner oluşturarak, o...

CSS dosyanız çok büyüdüğünde kendini tekrarlayan sınıfları bulmak zorlaşır. Gereksiz yere kendini tekrarlayan sınıfları silebilmek için CSS Purge kullanmanız en iyi çözüm olacaktır. Node.js'nin komut ekranını açın ve ilk başta CSS Purge yükleyin: npm install css-purge -g Arından temizlemek istediğiniz css dosyasını erişimi kolay bir klasöre alın. (Örneğin C:\NodeDosyam) Bu klasöre gidin ve Purge'ü çalıştırın: css-purge -i stilim.css -o stilim_temiz.css Yukarıdaki komutta input kısmına (-i) işlemek istediğiniz CSS dosyasının adını, output kısmına ise oluşturmak istediğiniz, temizlenmiş CSS dosyasının adını yazıyoruz. Not: Bu işlem CSS dosyanızın içerisindeki yorumları da silecektir...

TeleportPro ve benzeri otomatik tema indirme programları ile sitenizin içerisindeki görselleri korumak istiyorsanız bu yöntemi kullanabilirsiniz. Bu basit CSS Hack sayesinde sadece yolları korumakla kalmazsınız, aynı zamanda temanızı ayrıştırmak için de kolay bir yöntem seçmiş olursunuz. Index içerisinde dahil ettiğiniz CSS dosyasına şu şekilde bir uygulama yapabilirsiniz. /* Siyah Tema Değişkenleri */ @birinciRenk: #FFFFFF; @arkaplanRenk: #000000; @temaAdi: "siyah"; @cerceveRengi: #333333; @metinRengi: #cccccc; @butonRengi: #232323; Bu sayede şu şekilde kodlama yapabilirsiniz: body { background: @arkplanRenk; } a:link, a:visited { text-decoration: none; color: darken(@metinRengi, 10%); } Bu durum aynı zamanda CSS içerisinden çağırdığınız resim dosyalarının yollarını korumakta da kullanılabilir: #content { background: url('images/@{temaAdi}-content-scroll-bg.png) top center repeat-y; } Böylece sitelerin içerisinde gezinip ot...