Bir sayfanın masaüstünde düzgün görünmesi, aynı düzenin telefonda da kullanılabilir olduğu anlamına gelmez. Uzun başlıklar, farklı görsel oranları ve açılan menüler dar ekranda yeni sorunlar oluşturur. Codex ile CSS düzenlemesi yaparken sadece “daha modern görünüm” istemek yerine hangi öğenin hangi koşulda değişeceğini tanımlamak gerekir. Örneğimizde kategori menüsü ve yazı kartları bulunan bir blog üzerinde çalışacağız.
Önce mevcut tasarımın sınırlarını çıkarın
Değişiklikten önce kullanılan renk, yazı tipi, boşluk ve köşe kurallarını belirleyin. Projede zaten tasarım değişkenleri varsa yeni sabit renkler eklemek yerine bunlarla çalışmak tutarlılığı korur. Kart aralığını azaltma işi, başlık ağırlığını veya tema rengini yeniden tasarlamayı gerektirmez. Küçük isteklerin geniş görsel değişikliklere dönüşmesini bu sınırlarla önleyebilirsiniz.
Codex'e örnek ekran görüntüsü verirken görüntünün hangi durumu gösterdiğini söyleyin. Menü açık mı, sayfa koyu temada mı, tarayıcı yakınlaştırılmış mı? Referanstaki her ayrıntının kopyalanmasını istemiyorsanız asıl alınacak davranışı belirtin. Örneğin hedef yalnızca menünün sağa taşmadan açılması olabilir; bütün başlığı yeniden kurmak gerekmez.
Görevi içerik çeşitliliğiyle tarif edin
Şu örnek prompt kullanılabilir:
Blog kartlarını dar ekranda daha dengeli göster. Mevcut renk, Poppins yazı tipi ve kart köşelerini koru. Uzun Türkçe başlıklar ve görselsiz kartlar dahil gerçek içerikle kontrol et. Menü açıldığında gövde yatay taşmasın. Yalnızca ilgili bileşen ve kırılım kurallarını değiştir; masaüstü görünümünü etkileyen farkları ayrıca belirt.
Burada “dar ekran” için projenin desteklediği birkaç gerçek ölçüyü de ekleyin. Tek bir telefon boyutuna uyarlamak, aradaki genişliklerde iyi sonuç verildiğini garanti etmez. Görselin yüklenmediği veya başlığın iki satırdan fazla olduğu durumlar da tasarımın parçasıdır.
CSS çözümünü bileşen sınırında tutun
Bir menüyü düzeltmek için bütün bağlantıların boşluğunu değiştiren genel seçiciler kullanmak, başka sayfaları etkileyebilir. Codex'ten mevcut bileşen seçicilerini ve stil sırasını incelemesini isteyin. Aynı özelliği farklı dosyalarda tekrar tekrar ezmek kısa vadede sonuç verse bile sonraki düzenlemeyi zorlaştırabilir. Sorunun hangi kuraldan geldiği anlaşıldığında küçük değişiklik daha kolay incelenir.
Sabit yükseklikler özellikle değişken metinde dikkat ister. Başlık uzadığında içeriği kesen bir kart, örnek görüntüde güzel görünse de gerçek yazıda bilgi kaybettirebilir. Taşmayı saklamak yerine alanın nasıl büyüyeceğini veya metnin nasıl sarılacağını tanımlayın. İkon ve düğmelerin tıklama alanını yalnızca görünür simgenin boyutuna indirgemeyin.
Sonucu etkileşim sırasında kontrol edin
Uygun tarayıcı erişimi varsa başlangıç ve sonuç görüntülerini aynı ekran ölçüsünde karşılaştırın. Sonra menüyü açın, klavyeyle odağı taşıyın ve sayfayı kaydırın. Hover, odak ve açık durumunun birbirinden anlaşılır olması gerekir. Sadece kapalı menünün ekran görüntüsü açılır panelin konumunu doğrulamaz.
Son olarak ortak başlığın bulunduğu kategori, arama ve yazı sayfasına kısa bir geçiş yapın. Ana sayfada düzeltilen seçici diğer alanlarda farklı içerikle karşılaşabilir. Yapılan görsel kontrolün ölçülerini ve kapsamadığı durumları not ederek teslim edin. Böylece CSS değişikliği bir beğeni yorumu olmaktan çıkıp belirlenmiş davranışın gözlemlenebilir iyileştirmesine dönüşür.
İnceleme için yalnızca yeni ekran görüntüsünü değil, değişen seçicilerin kısa listesini de saklayın. Örneğin menü genişliğinin değişmesi başlık alanındaki diğer düğmeleri itiyorsa görsel farkın nedeni anlaşılabilir. Küçük CSS işleri için bu kısa kayıt, ileride aynı bileşene dokunulduğunda hangi davranışın korunacağını hatırlatır.
Resmî kaynak: OpenAI — Frontend prompt instructions.
