Firefox'ta Yeni ve Deneysel CSS Geliştirme Araçları Kılavuzu

Son birkaç yıldır Firefox'taki ekibimiz hem en son teknikleri hem de eski hayal kırıklıklarını ele alan yeni CSS araçları üzerinde çalışıyor. Firefox Geliştirici Araçları'nın bir alt kümesi olan Düzen Araçları ekibiyiz ve arayışımız modern web tasarımı iş akışını geliştirmek.

Web, son on yılda inanılmaz bir evrim geçirdi: yeni HTML/CSS özellikleri, tarayıcı geliştirmeleri ve tasarım teknikleri. Ekibimiz, tasarımcıların ve geliştiricilerin artık mümkün olan verimlilik ve yaratıcılıktan daha fazla yararlanabilmeleri için bu yeniliğe uygun araçlar oluşturmaya kendini adamıştır.

Bu kılavuzda, tasarım sürecinden hikayeler ve her bir aracı denemek için pratik adımlar içeren yedi yeni aracımızın bir özetini paylaşacağız.

1. Şebeke Denetçisi

Her şey üç yıl önce CSS düzeni uzmanımız ve geliştirici savunucumuz Jen Simmons'ın Firefox DevTools üyeleriyle birlikte çalışarak kullanıcılara CSS Izgara düzenlerini incelemelerinde yardımcı olacak bir araç oluşturmasıyla başladı.

Modern web'in en güçlü yeni özelliklerinden biri olan CSS Grid, hızlı bir şekilde tarayıcı benimsemesini sağlamıştı, ancak yine de web sitesi benimseme oranı düşüktü. Dik bir öğrenme eğrisi var ve belirli tarayıcılar için hala yedeklere ihtiyacınız var. Bu nedenle hedefimizin bir kısmı, geliştiricilere onu öğrenmeleri için daha uygulamalı bir yol sunarak Grid'i popülerleştirmeye yardımcı olmaktı.

Aracın özü, geliştiricilerin ızgaranın öğelerini nasıl konumlandırdığını ve stillerini değiştirdiklerinde mizanpajın nasıl değiştiğini görselleştirmelerine yardımcı olan, sayfanın üzerine yerleştirilmiş bir ızgara anahattıdır. Her ızgara çizgisini tanımlamak için numaralandırılmış etiketler, aynı anda üç ızgaraya kadar görüntüleme yeteneği ve kaplamalar için renk özelleştirmesi ekledik. Yakın zamanda, Firefox'ta ve umarım yakında daha fazla tarayıcıda uygulanan yepyeni bir CSS özelliği olan alt ızgara için destek ekledik.

Grid Inspector, takip eden tüm araçlar için bir ilham kaynağı oldu. Hatta yeni bir ekip için ilham kaynağı oldu: Düzen Araçları! 2017'nin sonlarında kurulduk, dört zaman dilimine yayılmış durumdayız ve Mozilla'da işleme motoru geliştiricilerimiz ve MDN'deki iyi insanlar gibi birçok kişiyle işbirliği yapıyoruz.

Izgara Denetçisini Deneyin

1. Firefox'ta Grid örnek sitemizi ziyaret edin.
2. Inspector'ı Cmd + Shift + C ile açın.
3. Üç yoldan biriyle Izgara yer paylaşımını açın:
• Düzen Paneli :
  Izgara bölümünde, .content.grid-content öğesinin yanındaki onay kutusunu işaretleyin;
• İşaretleme Görünümü :
  <div class="content grid-content"> öğesinin yanındaki "ızgara" rozetini değiştirin;
• Kural Görünümü :
  Tıkla display:grid; #page-intro .grid-content içinde;
4. Izgara Denetçisi ile deney yapın:
• Mor kaplama rengini kırmızıya değiştirin;
• “Satır numaraları” veya “Satırları sonsuza kadar uzat” arasında geçiş yapın;
• Daha fazla ızgara yerleşimini açın;
• Kurallar'da grid-gap: 15px devre dışı bıraktığınızda ne olduğunu görün.

Grid'den beri, bir tarayıcı CSS aracının ne olabileceğine dair olasılıkları genişletmeye çalışıyoruz.

“

2. Şekil Yolu Düzenleyicisi

Üzerinde çalıştığımız bir sonraki proje, ilk görsel düzenleme aracımız olan Shape Path Editor oldu.

CSS Şekilleri, metnin etrafında akması için şekiller tanımlamanıza olanak tanır: bir daire, bir üçgen veya çok kenarlı bir çokgen. Öğeleri aynı şekillerden herhangi birine kırpmanıza izin veren clip-path özelliği ile kullanılabilir. Bu iki teknik birlikte, bazı çok benzersiz grafik tasarımdan ilham alan mizanpajların olasılığını açar.

Ancak bu bazen karmaşık şekilleri oluşturmak zor olabilir. Tüm koordinatları manuel olarak yazmak ve doğru CSS birimlerini kullanmak hataya açıktır ve Shapes'in izin verdiği yaratıcı zihniyetten çok uzaktır. Bu nedenle, sayfadaki şekilleri doğrudan tıklayıp sürükleyerek kodunuzu düzenlemenizi sağlayan bir araç yaptık.

Bu tür bir özellik—görsel düzenleme—biz ve genel olarak tarayıcı araçları için yeniydi. Bu, teftiş ve hata ayıklamanın ötesine ve tasarım alanına nasıl geçebileceğimizin bir örneğidir.

Şekil Yolu Düzenleyicisini Deneyin

1. Firefox'ta, An Event Apart web sitesindeki bu sayfayı ziyaret edin.
2. Inspector'ı Cmd + Shift + C ile açın ve ilk dairesel görüntüyü seçin.
3. Kurallar'da, üzerine tıklayın shape-outside özelliğinin yanındaki simge.
4. Sayfada, şeklin noktalarını tıklayın ve şekli büyük veya küçük yapmak için sürüklediğinizde ne olduğunu görün. Size iyi görünen bir boyuta değiştirin.

Görsel düzenleme, inceleme ve hata ayıklamanın ötesine ve tasarım alanına nasıl geçebileceğimizin bir örneğidir.

“

3. Yazı Tipi Editörü

Yıllardır Firefox'ta bir web sitesinde kullanılan tüm yazı tiplerinin bilgilendirici bir listesini gösteren bir Yazı Tipleri panelimiz vardı. Tarayıcıda tasarlama temamıza devam ederken, bir yazı tipinin özelliklerine ince ayar yapmak için bunu bir Yazı Tipi Düzenleyicisine dönüştürmeye karar verdik.

Bu projenin arkasındaki itici güç, Firefox işleme motoru ekibinin buna destek eklerken Değişken Yazı Tiplerini destekleme hedefimizdi. Değişken Yazı Tipleri, yazı tipi tasarımcılarına tek bir yazı tipi dosyası içinde ağırlık gibi eksenler boyunca ince taneli varyasyonlar sunmanın bir yolunu sunar. Ayrıca, hem yazı tipi yaratıcılarına hem de web tasarımcılarına inanılmaz miktarda esneklik sağlayan özel eksenleri de destekler. Aracımız bu özel eksenleri otomatik olarak algılar ve size bunları ayarlamanız ve görselleştirmeniz için bir yol sunar. Bu, aksi takdirde Axis-Praxis gibi özel web siteleri gerektirecektir.

Ek olarak, o belirli yazı tipinin sayfada nerede kullanıldığını vurgulamak için bir yazı tipi adının üzerine gelme yeteneği sağlayan bir özellik ekledik. Bu yararlıdır, çünkü tarayıcıların bir metin parçasını oluşturmak için kullanılan yazı tipini seçme şekli karmaşık olabilir ve kişinin bilgisayarına bağlı olabilir. Yazı tipi alt ayarı nedeniyle bazı karakterler beklenmedik bir şekilde farklı bir yazı tipiyle değiştirilebilir.

Yazı Tipi Düzenleyicisini Deneyin

1. Firefox'ta bu değişken yazı tipi demo sitesini ziyaret edin.
2. Denetçiyi Cmd + Shift + C ile açın ve başlıkta "değişken" kelimesini seçin (elemanın seçicisi .title__variable-web__variable ).
3. Denetçinin üçüncü bölmesinde, Yazı Tipleri paneline gidin:
• Neyin vurgulandığını görmek için imleci Çıktı Sans Normal yazı tipi adının üzerine getirin;
• Ağırlık ve eğik kaydırıcıları deneyin;
• Örnekler açılır menüsünde önceden ayarlanmış yazı tipi varyasyonlarına bir göz atın.

4. Flexbox Müfettişi

Izgara, Şekiller ve Değişken Yazı Tipleri araçlarımız birlikte web üzerinde çok gelişmiş bazı grafik tasarımlarını güçlendirebilir, ancak yine de tarayıcı desteğine dayalı olarak son teknolojidirler. (Neredeyse oradalar, ancak yine de yedekler gerekiyor.) Yalnızca yeni özellikler üzerinde çalışmak istemedik - çoğu web geliştiricisinin günlük olarak karşılaştığı sorunlara çekildik.

Böylece Flexbox Inspector üzerinde çalışmaya başladık. Tasarım açısından bu bizim en iddialı projemiz oldu ve ekibimiz için bazı yeni kullanıcı araştırma stratejileri geliştirdi.

Grid gibi, CSS Flexbox da ilk başladığınızda oldukça dik bir öğrenme eğrisine sahiptir. Bunu gerçekten anlamak zaman alıyor ve çoğumuz istediğimiz düzenleri elde etmek için deneme yanılma yöntemine başvuruyoruz. Projenin başında ekibimiz Flexbox'ı anlayıp anlamadığımızdan bile emin değildi ve ana zorlukların ne olduğunu bilmiyorduk. Böylece anlayışımızı bir üst seviyeye çıkardık ve konu Flexbox olduğunda insanların en çok neye ihtiyaç duyduğunu keşfetmek için bir anket düzenledik.

Sonuçların planlarımız üzerinde büyük etkisi oldu ve büyüme/küçülme ve min/maks gibi karmaşık görselleştirmeleri gündeme getirdi. Gelişen görsel prototiplere ve Nightly yapılarına geri bildirim ekleyerek proje boyunca toplulukla çalışmaya devam ettik.

Araç iki ana parça içerir: Grid Inspector'ınkine çok benzeyen bir vurgulayıcı ve Inspector içinde ayrıntılı bir Flexbox aracı. Aracın özü, boyutlandırma bilgisi içeren esnek bir öğe diyagramıdır.

Gecko yerleşim mühendislerinin yardımıyla, kullanıcılara esnek bir öğenin belirli bir boyuta neden ve nasıl ulaştığının tam bir resmini vermek için işleme motorunun boyut kararlarını adım adım gösterebildik.

Not : Tasarım sürecimizin tüm hikayesini "Flexbox Inspector'ı Tasarlama" bölümünden öğrenin.

Flexbox Inspector'ı Deneyin

1. Firefox'ta Mozilla'nın Bugzilla'sını ziyaret edin.
2. Inspector'ı Cmd + Shift + C ile açın ve div.inner öğesini seçin (başlık çubuğunun hemen içinde).
3. Flexbox yer paylaşımını üç yoldan biriyle açın:
• Düzen Paneli :
  Flex Container bölümünde anahtarı açın;
• İşaretleme Görünümü :
  <div class="inner"> yanındaki "esnek" rozeti değiştirin;
• Kural Görünümü :
  Tıkla display:flex yanındaki düğme.
4. nav#header-nav adlı bir Flex Öğesine gitmek için Flex Container panelini kullanın.
• Şemada ve beden tablosunda gösterilen bedenlere dikkat edin;
• Tarayıcınızın genişliğini artırın ve azaltın ve diyagramın nasıl değiştiğini görün.

Interlude: Araştırmayı İkiye Katlamak

Resmi bir kullanıcı araştırması desteği olmayan küçük bir ekip olarak, sıklıkla tasarım yoluyla test sürümüne başvurduk: fikirlerimizi araçları kullanma konusundaki kendi deneyimlerimize dayandırdık. Ancak Flexbox anketiyle elde ettiğimiz başarıdan sonra, bize rehberlik edecek veri toplama konusunda daha iyi olmak istediğimizi biliyorduk. Sonraki adımlarımızı bilgilendirmek için yeni bir anket yaptık.

Web geliştiricilerinin karşılaştığı en büyük 20 zorluğun bir listesini kitle kaynaklı olarak topladık ve topluluğumuzdan bunları bir maksimum fark biçimi kullanarak sıralamasını istedik.

Zorlukların en büyük kazananının CSS Mizanpaj Hata Ayıklama olduğunu bulduğumuzda, en büyük sıkıntı noktalarını keşfetmek için belirli CSS hataları üzerinde bir takip anketi yaptık. Bu anketleri kullanıcı görüşmeleri ve kullanıcı testleri ile destekledik.

Ayrıca insanlardan tarayıcı geliştirici araçlarıyla ilgili hayal kırıklıklarını sıralamalarını istedik. En önemli sorun, CSS değişikliklerini düzenleyiciye geri taşımaktı. Bu bizim bir sonraki projemiz oldu.

5. Değişiklikler Paneli

Bir kişinin çalışmasını bir tarayıcı geliştirici aracından editöre aktarmanın zorluğu, hepimizin alıştığı asırlık sorunlardan biridir. Basit ve hemen kullanılabilir bir çözüm üretmekten heyecan duyduk.

Edge ve Chrome DevTools, önce bu aracın çeşitleriyle çıktı. Bizimki, çok çeşitli CSS iş akışlarına yardımcı olmaya odaklanmıştır: DevTools'u başlatın, istediğiniz stilleri değiştirin ve ardından değişikliklerinizin tamamını (işbirliği için) kopyalayarak veya yalnızca bir değiştirilmiş kuralı (koda yapıştırmak için) dışa aktarın.

Bu, diğer düzen araçlarımız da dahil olmak üzere tüm iş akışının sağlamlığını artırır. Ve bu sadece bir başlangıç: Sayfadan yanlışlıkla yenilemenin ve gezinmenin büyük bir veri kaybı kaynağı olduğunu biliyoruz, bu nedenle araca kalıcılık getirmenin bir yolu önemli bir sonraki adım olacaktır.

Değişiklikler Panelini Deneyin

1. Firefox'ta herhangi bir web sitesine gidin.
2. Inspector'ı Cmd + Shift + C ile açın ve bir öğe seçin.
3. CSS'de bazı değişiklikler yapın:
• Kurallar bölmesinde stilleri değiştirin;
• Yazı Tipleri bölmesinde yazı tiplerini ayarlayın.
4. Denetçinin sağ bölmesinde, Değişiklikler sekmesine gidin ve aşağıdakileri yapın:
• Tüm Değişiklikleri Kopyala'yı tıklayın, ardından çıktıyı görüntülemek için bir metin düzenleyiciye yapıştırın;
• Seçici adının üzerine gelin ve Kuralı Kopyala'yı tıklayın, ardından çıktıyı görüntülemek için yapıştırın.

6. Etkin Olmayan CSS

Etkin Olmayan CSS özelliğimiz, belirli CSS hatalarına ilişkin düzen hata ayıklama anketimizin en önemli sorunlarından birini çözer:

"Bu CSS özelliği neden hiçbir şey yapmıyor?"

Tasarım açısından bu özellik çok basittir; sayfayı etkilemeyen CSS'yi grileştirir ve özelliğin neden bir etkisinin olmadığını açıklamak için bir araç ipucu gösterir. Ancak bunun verimliliği artırabileceğini ve hayal kırıklığını azaltabileceğini biliyoruz. Sarah Lim ve benzer bir araç yapan meslektaşlarının araştırmasıyla desteklendik. Çalışmalarında, acemi geliştiricilerin alakasız kodu yok saymalarına izin veren bir araç kullandıklarında CSS ile oluşturmada %50 daha hızlı olduklarını buldular.

Bir bakıma, bu bizim en sevdiğimiz özellik türü: Bir özellik olarak zar zor kaydolan, ancak keşfedilmeye veya öğrenilmeye gerçekten ihtiyaç duymadan tüm iş akışını iyileştiren, düşük asılı bir UX meyvesi.

Etkin olmayan CSS, Firefox 70'te başlatılır ancak artık Developer Edition, Beta ve Nightly dahil olmak üzere Firefox'un yayın öncesi sürümlerinde kullanılabilir.

Etkin Olmayan CSS'yi Deneyin

1. Firefox Developer Edition'ı indirin;
2. Firefox'u açın ve wikipedia.org'a gidin;
3. Inspector'ı Cmd + Shift + C ile açın ve center central-featured içerik alanını seçin;
4. Gri renkli vertical-align bildirimine dikkat edin;
5. Bilgi simgesinin üzerine gelin ve ilgileniyorsanız "Daha fazla bilgi"yi tıklayın.

7. Erişilebilirlik Paneli

Yol boyunca, çoğunlukla bir kişiden oluşan ayrı bir ekip tarafından geliştirilen erişilebilirlik özelliklerimiz oldu - Yura Zenevich, bu yıl stajyer Maliha Islam ile birlikte.

Birlikte Firefox'taki yeni Erişilebilirlik panelini güçlü bir inceleme ve denetleme aracına dönüştürdüler. Erişilebilirlik ağacını ve özelliklerini görüntülemenin yanı sıra, artık bir sayfada farklı türde kontroller çalıştırabilirsiniz. Şimdiye kadar kontroller arasında renk kontrastı, metin etiketleri ve klavye odak stili yer alıyor.

Şimdi Nightly'de, yakında çıkacak WebRender teknolojimizi kullanan yeni renk körlüğü simülatörünü deneyebilirsiniz.

Erişilebilirlik Panelini Deneyin

1. Firefox Developer Edition'ı indirin;
2. Meetup.com'a gidin;
3. Geliştirici araçlarında Erişilebilirlik sekmesine gidin ve "Erişilebilirlik Özelliklerini Aç" düğmesini tıklayın;
4. "Sorunları kontrol et"in yanındaki açılır menüyü tıklayın ve "Tüm Sorunlar"ı seçin;
5. Çeşitli karşıtlık, klavye ve metin etiketi sorunlarına bir göz atın ve ilgileniyorsanız "Daha fazla bilgi edinin" bağlantılarına tıklayın.

Sıradaki

Seçili bir öğe için tarayıcıya özgü sorunları göstermek için MDN'den alınan bilgileri kullanan bir tarayıcı uyumluluğu aracı üzerinde şu anda yoğun bir şekilde çalışıyoruz. Daha fazlasını öğrenmek için GitHub'da takip edebilirsiniz.

Gelecek

Modern web'i desteklemeye kararlıyız ve bu, sürekli değişmek ve büyümek anlamına gelir.

Tarayıcı satıcıları tarafından her zaman yeni özellikler uygulanır. Aşamalı geliştirme, yanıt verme ve erişilebilirlik ile ilgili yönergeler ve en iyi uygulamalar sürekli olarak gelişir. Biz alet üreticilerinin de gelişmeye devam etmesi gerekiyor.

Peki ya web'i yaratmada uzun süredir devam eden, her zaman var olan problemler? Hangi günlük kullanıcı arayüzlerinin yeniden düşünülmesi gerekiyor? Bunlar bizi devam ettiren sorulardan bazıları!

Bir sayfanın DOM ağacında gezinmenin daha iyi bir yoluna ne dersiniz? DevTools'un bu kısmı, Firebug günlerinden bu yana esasen değişmedi.

Son ziyaret edilen öğeler arasında gezinmeyi kolaylaştıracak geri ve ileri düğmeleri gibi özellikleri deniyoruz.

Tartıştığımız daha çarpıcı bir değişiklik, HTML şablonlama motorlarına benzer bir sözdizimi kullanan kompakt bir DOM görünümü eklemektir. Odak, kaynağı görüntülemek/düzenlemek yerine en yaygın kullanım durumuna (CSS'ye gitmek) olacaktır.

Ayrıca daha iyi bir eleman seçiciyi de düşünüyorduk. DevTools'a daha az geçiş yaparak sayfa içinde çalışmanın nasıl daha verimli olabileceğini biliyoruz. Öğe seçiciyi daha güçlü ve daha kalıcı hale getirebiliriz. Belki bir sayfadaki boşlukları seçip size o boşluğa neyin sebep olduğunu söyleyebilir veya farklı öğeler arasındaki ilişkilere ışık tutabilir.

Bunlar, topluluğun yardımıyla daha fazla keşfetmeyi umduğumuz birçok fikirden sadece ikisi.

Girişinize İhtiyacımız Var!

Bir geliştirici veya tasarımcı olarak hayatınızı kolaylaştıran harika araçlar yapmaya devam etmek istiyoruz.

İşte yardım etmenin kolay bir yolu: Firefox Developer Edition'ı indirin ve önümüzdeki hafta bazı işlerinizde kullanmayı deneyin.

Ardından, 1 sayfalık anketimize katılarak ne düşündüğünüzü bize bildirin.

Her zaman iyileştirme fikirleri duymakla ilgileniyoruz, özellikle de hepimizi düzenli bir hayal kırıklığından kurtarabilecek herhangi bir düşük meyveli meyve. İşimizi açıkta yapıyoruz, böylece siz de takip edip müdahale edebilirsiniz. @FirefoxDevTools'da sizi güncel tutacağız.

Bu makaleye katkılarından dolayı Patrick Brosset'e teşekkürler.