Geliştirici Araçları'ndaki CSS Izgara araçları

Neden CSS Izgara Araçları oluşturduk?

CSS Izgarası, web geliştiricilerinin karmaşık, iki boyutlu bir düzen oluşturmalarına ve bir ızgaradaki her bir alt öğenin boyutu, hizalanması ve sıralanmasıyla ilgili kurallar belirlemesine olanak tanıyan çok güçlü bir CSS düzen sistemidir. CSS Grid, Flexbox popüler hale geldikten sonra kullanıma sunuldu ve birlikte, geliştiricilerin karmaşık hizalama ipuçları veya JavaScript destekli düzen olmadan daha iyi duyarlı tasarım elde etmelerine yardımcı olabilir.

Nispeten yeni bir düzen sistemi olan CSS Grid'in de doğru şekilde kullanılması zordur. Söz dizimi oldukça çok yönlüdür (kılavuz kılavuzu araması yapın). Aynı düzeni elde etmenin birçok yolu vardır. Esnek boyutlandırma ve dolaylı kanallar, düzenin neden olması gerektiği gibi çalışmasını veya olmadığını anlamayı zorlaştırır. Bu nedenle Geliştirici Araçları'nda özel CSS Izgara araçları sunmaya başladık. Böylece geliştiricilerin, CSS kodlarının işlevini ve doğru düzeni nasıl elde edeceklerini daha iyi anlayabilmeleri sağlanacak.

Alet tasarımı

Chrome ve Edge arasındaki ortak çaba

CSS ızgara aracı, hem Chrome Geliştirici Araçları hem de Edge Geliştirici Araçları'nın dikkatini çekti. En başından beri işbirliği yapmaya karar verdik. Her iki ekipten de ürün, mühendislik ve tasarım kaynaklarımızı paylaştık ve bunu gerçekleştirmek için haftalık koordinasyon içinde çalıştık.

Özelliklerin özeti

CSS Izgara aracının üç temel özelliği vardır:

1. Boyutsal ve sıralama bilgilerine yardımcı olan, tabloya özgü, kalıcı yer paylaşımı
2. DOM Ağacı'nda, CSS Izgara kapsayıcılarını vurgulayan ve Izgara yer paylaşımlarını aç/kapatan rozetler
3. Geliştiricilerin DOM yer paylaşımlarının görüntüsünü kişiselleştirmelerine (ör. kuralların rengini ve genişliğini değiştirme) olanak tanıyan bir kenar çubuğu bölmesi
4. Stiller bölmesinde bir CSS Izgara düzenleyicisi

Şimdi bunlara daha yakından bakalım.

Izgarada kalıcı yer paylaşımları

Geliştirici Araçları'nda yer paylaşımı, tek bir öğenin düzen ve stil bilgilerini sağlayan güçlü bir araçtır:

Bu ek bilgiler, ilgili öğenin üzerine yerleştirilir. Daha önce, Geliştirici Araçları açıkken bir ızgaranın üzerine geldiğinizde, yer paylaşımı kutu model bilgilerini gösteriyordu, ancak bunun nedenini açıklamadan içeriğin vurgulanması ızgara öğeleriyle sınırlıydı. CSS Izgara yer paylaşımları için eklemek istediğimiz iki ana bölüm vardır:

• Izgaralar hakkında daha yararlı bilgiler (ör. yazılmış boyutlar ve boşluklar) göstermek istiyoruz
• yer paylaşımlarını yapışkan hale getirmek istiyoruz. Böylece aynı anda birden çok Izgaraya bakabiliyor ve öğe stillerini değiştirdikçe Izgara bilgilerini güncelleyen yer paylaşımlarını görebiliyoruz

Her ikisini de nasıl başardığımıza bir göz atalım.

Oluşturulan boyutlar ile hesaplanan boyutların karşılaştırması

CSS ızgarasında hata ayıklamanın zor kısımlarından biri, kılavuz yolu boyutlarını tanımlamanın birçok yoludur. Örneğin, çok yönlü parça boyutları oluşturmak için piksel değerleri, yüzde değerleri, kesirler, tekrarlama işlevi ve minmax işlevlerinin bir kombinasyonunu kullanabilirsiniz:

.grid-cards {
    display: grid;
    width: 200px;
    height: 300px;
    grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Ancak bu yazdırılan kanal boyutlarını, tarayıcının bizim için hesapladığı hesaplanan kanal boyutlarıyla eşleştirmek zordur. Bu boşluğu doldurmak için, aşağıdaki iki bilgiyi yer paylaşımına yan yana yerleştiriyoruz:

Noktadan önceki dize, yazılan değerdir, noktadan sonraki dize ise gerçek hesaplanan değeri temsil eder.

Daha önce Geliştirici Araçları, yazılan değerleri alma özelliğine sahip değildi. Teoride, DevTools'da yazılan değerleri bir şekilde kendimiz ayrıştırabilir ve CSS Grid spesifikasyonuna göre hesaplayabiliriz. Bu durum, birçok karmaşık senaryoyu içereceği için esasen Blink'in çalışmalarının bir kopyası olacaktır. Bu nedenle Blink'in Stil ekibinin yardımıyla, stil motorundan "basamaklı değerleri" gösteren yeni bir API elde ettik. Basamaklı değer, bir CSS mülkü için CSS geçişinden sonraki son etkin değerdir. Bu, stil motoru tüm stil sayfalarını derledikten sonra ancak herhangi bir değeri (ör.yüzde, kesirler vb.) fiilen hesaplamadan önce kazanan değerdir.

Artık bu API'yi, yazılan değerleri ızgara yer paylaşımlarında görüntülemek için kullanıyoruz.

Kalıcı yer paylaşımları

CSS Izgara aracından önce, Geliştirici Araçları'ndaki yer paylaşımı basitti: Geliştirici Araçları'nın DOM Ağacı bölmesinde veya doğrudan incelenen sayfada bir öğenin üzerine geldiğinizde bu öğeyi açıklayan bir yer paylaşımı görürsünüz. Fareyle uzaklaştığınızda yer paylaşımı kaybolur. Izgara bindirmeleri için farklı bir şey istiyorduk: Birden çok Izgara aynı anda vurgulanabiliyor ve Izgara yer paylaşımları açık kalabiliyorken, üzerine gelindiğinde görünen yer paylaşımları çalışmaya devam ediyor.

Örneğin:

Ancak Geliştirici Araçları'ndaki yer paylaşımı, bu çok öğeli ve kalıcı mekanizma göz önünde bulundurularak tasarlanmamıştır (uzun yıllar önce oluşturulmuştur). Dolayısıyla, bu işin çalışması için yer paylaşımı tasarımını yeniden düzenlememiz gerekti. Mevcut vurgulama araçları paketine yeni bir GridHighlightTool ekledik. Bu araç daha sonra tüm kalıcı yer paylaşımlarının aynı anda vurgulanması için genel bir PersistentTool haline geldi. Her bir kalıcı yer paylaşımı türü (Izgara, Flex vb.) için kalıcı aracın içinde ilgili bir yapılandırma alanı tutarız. Yer paylaşımı vurgulayıcı ne çizileceğini her kontrol ettiğinde, bu yapılandırmaları da içerir.

Geliştirici Araçları'nın neyin vurgulanması gerektiğini kontrol etmesini sağlamak amacıyla Izgara kalıcı yer paylaşımı için yeni bir CDP komutu oluşturduk:

# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
  parameters
    # An array of node identifiers and descriptors for the highlight appearance.
    array of GridNodeHighlightConfig gridNodeHighlightConfigs

Burada her GridNodeHighlightConfig hangi düğümün çizileceği ve nasıl çizileceği hakkında bilgi içerir. Bu, mevcut öğe üzerine gelme davranışını bozmadan birden çok öğe içeren kalıcı bir mekanizma eklememize olanak tanır.

Gerçek Zamanlı Tablo rozetleri

Geliştiricilerin Izgara yer paylaşımlarını kolayca açıp kapatmalarına yardımcı olmak için DOM Ağacı'ndaki Izgara kapsayıcılarının yanına küçük rozetler eklemeye karar verdik. Bu rozetler, geliştiricilerin DOM yapılarında ızgara kapsayıcılarını tanımlamalarına da yardımcı olabilir.

DOM Ağacında Yapılan Değişiklikler

DOM Ağacı'nda göstermek istediğimiz tek rozet Grid rozetleri olmadığından rozet eklemeyi mümkün olduğunca kolaylaştırmak istiyoruz. Geliştirici Araçları'nda ayrı DOM Ağacı öğeleri oluşturmaktan ve yönetmekten sorumlu olan sınıf olan ElementsTreeElement, rozetleri yapılandırmak için herkese açık birkaç yeni yöntemle güncellendi. Bir öğe için birden fazla rozet varsa bunlar rozetlerin kategorilerine göre sıralanır. Ardından, aynı kategoride yer alan kişilerin adları alfabetik olarak sıralanır. Kullanılabilir kategoriler Security, Layout vb. içerir ve Grid, Layout kategorisine aittir.

Ayrıca, en başından itibaren yerleşik erişilebilirlik desteğimiz de mevcuttur. Salt okunur rozetler, rozet adlarını aria-label olarak kullanırken her etkileşimli rozetin varsayılan ve etkin bir aria-label sağlaması gerekir.

Gerçek zamanlı stil güncellemelerini nasıl aldık?

Çoğu DOM değişikliği, Geliştirici Araçları DOM Ağacı'na gerçek zamanlı olarak yansıtılır. Örneğin, yeni eklenen düğümler DOM Ağacı'nda bir anda görünürken kaldırılan sınıf adları da bir anda kaybolur. Izgara rozeti durumunun da aynı güncel bilgileri yansıtmasını istiyoruz. Ancak, DOM Ağacı'nda gösterilen öğeler hesaplanan stil güncellemeleri aldığında DevTools'un bildirim alması mümkün olmadığından bunun uygulanması zor oldu. Bir öğenin ne zaman Tablo kapsayıcısı haline geleceğini veya artık ne zaman olmayacağını bilmenin tek yolu, tarayıcıyı her bir öğenin güncel stil bilgisi için sürekli olarak sorgulamaktır. Bu, yasaktıcı bir şekilde pahalı olabilir.

Bir öğenin stili güncellendiğinde kullanıcı arabiriminin bunu anlamasını kolaylaştırmak amacıyla stil güncellemeleri yoklama için yeni bir CDP yöntemi ekledik. DOM düğümlerinin stil güncellemelerini almak için, tarayıcıya hangi CSS bildirimlerini izlemek istediğimizi söyleyerek başlıyoruz. Izgara rozetlerinde tarayıcının şunları izlemesini isteriz:

{
  "display": "grid",
  "display": "inline-grid",
}

Ardından bir yoklama isteği göndeririz. Öğeler panelinde DOM düğümleri için izlenen stil güncellemeleri olduğunda, tarayıcı DevTools'a güncellenmiş düğümlerin listesini gönderir ve mevcut yoklama isteğini çözer. Geliştirici Araçları, stil güncellemeleriyle ilgili tekrar bildirim almak istediğinde arka ucu her düğümden sürekli yoklamak yerine bu yoklama isteğini gönderebilir. Geliştirici Araçları, izlenmekte olan CSS bildirimlerini tarayıcıya yeni bir liste göndererek de değiştirebilir.

Düzen bölmesi

DOM Ağacı rozetleri, CSS Izgaralarının bulunabilirliğine yardımcı olsa da bazen belirli bir sayfadaki tüm CSS Izgaralarının listesini görmek ve düzenlerinde hata ayıklamak için kalıcı yer paylaşımlarını kolayca açıp kapatmak isteriz. Bu nedenle, yalnızca yerleşim araçları için özel bir kenar çubuğu bölmesi oluşturmaya karar verdik. Bu, tüm Izgara kapsayıcılarını toplamak ve ızgara yer paylaşımları için tüm seçenekleri yapılandırmak için özel bir alan sağlar. Bu Layout bölmesi, düzen açısından ağırlıklı olan araçları (ör. Flexbox, Container sorguları) buraya koymamıza olanak tanır.

Hesaplanan stillere göre öğe bulma

Düzen bölmesinde CSS Izgara kapsayıcılarının listesini göstermek için DOM düğümlerini hesaplanan stillere göre bulmamız gerekir. Geliştirici Araçları açıkken tüm DOM düğümleri hakkında bilgi sahibi olmadığı için bu süreç de kolay olmadı. Bunun yerine, Geliştirici Araçları DOM Ağacı'nı başlatmak için yalnızca genellikle DOM hiyerarşisinin en üst düzeyinde olan küçük bir düğüm alt kümesini bilir. Performans nedeniyle, diğer düğümler yalnızca istek üzerine getirilecektir. Bu, sayfadaki tüm düğümleri toplamak ve hesaplanan stillerine göre filtrelemek için yeni bir CDP komutuna ihtiyacımız olduğu anlamına gelir:

# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
  parameters
    # Node ID pointing to the root of a subtree.
    NodeId nodeId
    # The style to filter nodes by (includes nodes if any of properties matches).
    array of CSSComputedStyleProperty computedStyles
    # Whether or not iframes and shadow roots in the same target should be traversed when returning the
    # results (default is false).
    optional boolean pierce
  returns
    # Resulting nodes.
    array of NodeId nodeIds

Bu, Geliştirici Araçları ön ucunun bir sayfadaki CSS ızgara kapsayıcılarının listesini almasını, muhtemelen iframe'ler ve gölge kökleri üzerinden delinmesini ve bunları Düzen bölmesinde oluşturmasını sağlar.

Sonuç

CSS Izgara araçları, bir Web Platformu özelliğini destekleyen ilk Geliştirici Araçları tasarım araçları projelerinden biridir. ? Ayrıca, geliştiricilerin Grid ve Flexbox hizalamalarını etkileşimli bir şekilde değiştirmelerine olanak tanıyan Grid ve Flexbox düzenleyicilerinin temelini de hazırladı. Bunlara ilerleyen zamanlarda değineceğiz.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları ile Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz.

Chrome Geliştirici Araçları ekibiyle iletişime geçme

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize öneri veya geri bildirim gönderin.
• Geliştirici Araçları'nda Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
• @ChromeDevTools adresine tweet gönderin.
• Geliştirici Araçları YouTube videoları bölümündeki yenilikler veya Geliştirici Araçları İpuçları YouTube videoları bölümlerimize yorum yapın.