Tarayıcı Kontrolü

[cagrimertbakirci]

Projenin farklı tarayıcılarda nasıl çalıştığını kontrol etmemiz ve aksaklıkları gidermemiz gerekiyor.

En öncelikli olanlar:

1. Chrome (Temelde buna yönelik tasarlandı)
2. Firefox
3. Safari

Ek olarak:

1. Opera
2. Edge

Mobil tarayıcılar için ayrı issue oluşturacağız.

[evilese]

Tasarımsal bir şey belirtmek istiyorum. Hakkımızda sayfasında yazı maalesef okunabilirlik açısından iyi değil, ufak biz düzenleme yaptım belki işinize yarar.

/* LİNKLERİ DAHA OKUNABİLİR YAPAR */
.description>p>a {
    color: #75e8e6;
    text-decoration: none;
    font-weight: 700;
}

/* GENELİ DAHA OKUNABİLİR YAPAR */

.description[data-v-7fdfdd16] {
    font-size: 0.9em;
    color: #b5bac5;
    font-weight: 400;
    line-height: normal;
}

---

/* MEVCUT HALİ */

/* DÜZENLENEN HALİ */

---

/* SCSS VERSİYON */ 
.description {
	>p {
		>a {
			color: #75e8e6;
			text-decoration: none;
			font-weight: 700;
		}
	}
	font-size: 0.9em;
	color: #b5bac5;
	font-weight: 400;
	line-height: normal;
}

[krumdahr]

Merhaba,
Firefox'da (96.0.1 (64 bit)) deyalı bilgi paneli transparan açıldığı için okumak pek mümkün değil maalesef.

[erdemildiz]

Fontların daha okunabilir olması iyi olur.

[turkerdev]

Merhaba, Firefox'da (96.0.1 (64 bit)) deyalı bilgi paneli transparan açıldığı için okumak pek mümkün değil maalesef.

Sıvı ile gazın resimleri ters olmuş sanırım.

[krumdahr]

Benzer transparan görünüm sorunu bileşik oluşturma panelinde de mevcut. Ayrıca ilk elenement (burada Al) koyu bir renk ile yazıldığı için okumayı güçleştiriyor.

[yafesdot]

@cagrimertbakirci bence bu başlığı da tartışmaya atmak mantıklı olabilir

[nesimtunc]

Yukarida testlere ek olarak Mac OS Monterey ve Windows 11 isletim sistemlerindeki Safari, Edge ve Opera ile denedim. Denemeyi base olarak Anasayfayi ele aldim. Diger alt sayfalardaki gorsel degisiklikler hemen hemen her yerde ayni ve kismen duzeltildi, duzeltiliyor.

Cozunurluk: 1920x910
Test Ortami: BrowserStack.com
Sonuc: Window 11 - Safari v5.1 haric basarili

Windows 11 Safari v5.1 Ekran Goruntuleri:

[nesimtunc]

Selam @evilese, degisikliklerin guzel gozukuyor, acaba onlari bir kod degisikligi olarak bize gonderseniz şık olmaz mı? 😎

[cagrimertbakirci]

/* LİNKLERİ DAHA OKUNABİLİR YAPAR */
.description>p>a {
    color: #75e8e6;
    text-decoration: none;
    font-weight: 700;
}

/* GENELİ DAHA OKUNABİLİR YAPAR */

.description[data-v-7fdfdd16] {
    font-size: 0.9em;
    color: #b5bac5;
    font-weight: 400;
    line-height: normal;
}

Buna bir PR şart. 😍