CSS Dersleri

CSS ile çıktı alırken sayfa sonunu belirlemek

Fatih Hayrioğlu

Fatih Hayrioğlu

— 1 min read
CSS ile çıktı alırken sayfa sonunu belirlemek

Daha öncede birkaç kere aynı soru ile karşılaştım.

Soru: Çıktı alırken web sitemin belirlediğim yerden sayfalara ayrılması için ne yapabilirim?

CSS ile bunun çözümü kolay. Örneğin tablolardan oluşan bir web sayfanız var. Çıktı alırken bu tabloların ortadan bölünmesini istemiyoruz. Belirlediğimiz yerde sayfanın sonu gelsin istiyoruz.

Aşağıdaki gibi bir sayfamız olsun.

enter image description here

Bu sayfanın çıktısı almak istediğimizde

enter image description here

İki tabloyu çıktı alırken ayırsak iyi olur.

@media all {
  .page-break { display: none; }
}

@media print {
  .page-break { display: block; page-break-before: always; }
}

Sayfayı bölmek istediğimiz yere

<div class="page-break"></div>

ekliyoruz. Sonuç

enter image description here

Benzer mantıkla çıktı alırken sayfalama ayrımı yapabiliriz.

Kalın sağlıcakla.

Kaynaklar

Read more

gemini ile oluşturulmuştur :)

Lokalde tarayıcı geliştirme araçları üzerinden network isteklerini değiştirmek

FE geliştiriciler olarak hayatımız network istekleri(request) ve BE'den gelen dönen cevaplarla(response) geçiyor. Kendi bilgisayarımızda çalışırken bu istekleri değiştirme ihtiyacı olduğunda mock server kurmak veya çeşitli kütüphanelerle bu işi yapıyordum. Mock işini tarayıcı üzerinden yapmaya başlayalı çok rahatladım. Süper kolaylık sağlayan bir özellik. Genel kullanım alanları * BE

By Fatih Hayrioğlu
CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme:

By Fatih Hayrioğlu
Tarayıcı geliştirici araçlarında yakınlaştırma ve uzaklaştırma yapmak

Tarayıcı geliştirici araçlarında yakınlaştırma ve uzaklaştırma yapmak

Yaşlandıkça böyle ihtiyaçlar doğuyor galiba. Belki ihtiyacı olan olur diye buraya not edeyim. Chrome Dev Tools gibi araçlarda başlangıçtaki görünüm küçük kalabiliyor. Benim için küçük mesela :) Yazı boyutlarını büyütmek için Cmd + +  and  Cmd + - (Windows'ta Cmd yerine Ctrl kullanın). Ancak bu kısayol İngilizce klavye için Türkçe klavyelerde bunu yapmak

By Fatih Hayrioğlu