Genel

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

Fatih Hayrioğlu

10 Haz 2024 — 1 min read

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 için

Büyütmek için: cmd + . veya cmd + shift + p ile açılan menüye zoom inyazarakta oluyor. Küçültmek için: cmd + -Başlangıç değerine dönmek için: cmd + 0

Safari

Büyütmek için: Kısayol bulamadım ancak Geliştirme aracının sağ üst köşesindeki ayarlar ikonuna tıklayıp gelen General sekmesinde en altta zoom seviyesini belirleyebiliyoruz. Küçültmek için: cmd + -Başlangıç değerine dönmek için: cmd + 0

Firefox

Büyütmek için: Adres barına about:config yazıp, arada gelen riskleri kabul ediyorum evet deyip sonra gelen arama kısmında devtools.toolbox.zoomValue yazıp gelen değeri 1.5 (kendi tercihinize göre değiştirin) yaparak hallettim. Küçültmek için: cmd + -Başlangıç değerine dönmek için: cmd + 0

Bir diğer seçenekte İngilizce klavyeye geçip standart kısayolları da kullanabilirsiniz.

Kaynaklar

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: light

field-sizing özelliği

CSS'in yeni özellikleri bazen çığır açan nitelikte (anchor positioning, :has() seçicisi, vb.) olurken bazen yazıma yardımcı kurallar (iç içe yazım, @property) oluyor bazen de genel kullanılan kullanıcı deneyimi arttırıcı özellikleri oluyor. field-size özelliği genel kullanıcı deneyimini arttırıcı bir özellik. field-size özelliği genelde javascript ile çözdüğümüz bir ihtiyacı karşılıyor.

HTML Akordiyon bileşeni

Uzun içerikli yapıları daha az yer kaplayacak şekilde ve daha işlevsel kullanmak için genelde akordiyon yapılarını kullanırız. Uzun süredir kullanıla gelen bu bileşenlerin genelde işlevselliğini javascript ile yapıyoruz. HTML ve CSS ile yapılan akordiyonlar için son günlerde gelen name attribute ile işlevsellik yönünden eksik kalan kısım tamamlandı. name attribute tam

Avatar Popout Efekti

CSS ile yapılanlar serisinde bu yazımda sizlere bir köşeli veya yuvarlak alan içindeki resmin üzerine gelince köşeli ve yuvarlak alanın dışına taşacak uygulamayı anlatmaya çalışacağım. Köşeli alanlarda popout efekti Bir kapsayıcı .kapsayici içinde yer alan resmi position: absolute; ve bottom: 0; ile kapsayıcının altına hizalıyoruz. Normal durumda biraz resmi küçültüyoruz.