CSS Izgara Aracı'nı neden oluşturduk?
CSS Izgarası, web geliştiricilerinin karmaşık iki boyutlu düzen oluşturmalarını ve ızgaradaki her bir alt öğenin nasıl boyutlandırıldığı, hizalandığı ve sıralandığıyla ilgili kurallar belirlemelerini sağlayan çok güçlü bir CSS düzen sistemidir. CSS ızgarası, 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 ızgarasını da tutturmak zordur. Söz dizimi oldukça çok yönlüdür (ızgara kopya kılavuzunda arama yapmanız yeterlidir), aynı düzeni sağlamanın birçok yolu vardır ve esnek boyutlandırma ve örtülü parçalar, düzenin neden olması gerektiği gibi davrandığını veya olmadığını anlamakta zorlanır. Bu nedenle, geliştiricilerin CSS kodlarının ne yaptığını ve doğru düzene nasıl ulaşacaklarını daha iyi anlayabilmesi için Geliştirici Araçları'nda özel CSS ızgara araçları sunmaya başladık.
Alet tasarımı
Chrome ile Edge'in ortak çalışması
CSS Izgara aracı, hem Chrome Geliştirici Araçları hem de Edge Geliştirici Araçları'nın dikkatini çekti. En başından itibaren ortak çalışmaya karar verdik. İki ekibin de ürün, mühendislik ve tasarım kaynaklarımızı paylaştık ve bunu gerçekleştirmek için haftalık olarak koordinasyon sağladık.
Özelliklerin özeti
CSS ızgara aracının üç ana özelliği vardır:
- Boyut ve sıralama bilgilerine yardımcı olan ızgaraya özgü, kalıcı yer paylaşımı
- DOM Ağacında CSS ızgara kapsayıcılarını vurgulayan ve ızgara yer paylaşımlarını açan rozetler
- Geliştiricilerin DOM yer paylaşımlarının görünümünü kişiselleştirmesine (ör. kuralların rengini ve genişliğini değiştirme) olanak tanıyan bir kenar çubuğu bölmesi
- Stiller bölmesinde bir CSS Izgara düzenleyicisi
Bir sonraki adımda bunlara daha yakından bakalım.
Izgara 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, ilgilenilen öğenin üzerine yerleştirilir. Daha önce, Geliştirici Araçları açıkken fareyle bir ızgaranın üzerine geldiğinizde, yer paylaşımı kutu modeli bilgileri gösteriyor ancak bunun nedeni açıklanmadan vurgulu içerik ızgara öğeleriyle sınırlanıyordu. CSS ızgara yer paylaşımları için eklemek istediğimiz iki ana bölüm var:
- Izgaralar hakkında daha yararlı bilgiler (ör. yazılmış boyutlar ve boşluklar) göstermek istiyoruz
- Aynı anda birden fazla Izgaraya bakabilmek için bindirmeleri yapışkan yapmak istiyoruz 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.
Yazılan boyutlar ile hesaplanan boyutların karşılaştırması
CSS ızgarasında hata ayıklamayla ilgili zor kısımlardan biri, ızgara kanalı boyutlarını tanımlamanın birçok farklı 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 min. maksimum işlevinin 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, hazırlanan bu parça boyutlarını, tarayıcının bizim için hesapladığı hesaplanan kanal boyutlarıyla eşlemek zor olur. Bu boşluğu doldurmak için bu iki bilgiyi yer paylaşımında yan yana yerleştiririz:
Noktadan önceki dize yazılan değerdir ve noktadan sonraki dize gerçek hesaplanan değeri temsil eder.
Daha önce Geliştirici Araçları, yazılan değerleri alma özelliğine sahip değildi. Teoride, Geliştirici Araçları'nda yazılan değerleri bir şekilde ayrıştırabildik ve bunları CSS Izgarası spesifikasyonuna göre hesaplayabilirdik. Bu, birçok karmaşık senaryoya yol açardı ve yalnızca Blink'in çalışmalarının kopyası olurdu. Dolayısıyla, Blink'in Stil ekibinin yardımıyla, stil motorundan "basamaklı değerleri" gösteren yeni bir API elde ettik. Basamaklı değer, CSS mülkü için CSS basamaklamasından sonra nihai etkili değerdir. Bu, stil motoru tüm stil sayfalarını derledikten sonra ancak herhangi bir değeri (ör.yüzde, kesirler vb.) gerçekten 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 ızgara aracından önce, Geliştirici Araçları'nda yer paylaşımı yapmak çok kolaydı. Fareyle Geliştirici Araçları'nın DOM Ağacı bölmesindeki veya doğrudan incelenen sayfada bir öğenin üzerine geldiğinizde bu öğeyi açıklayan bir yer paylaşımı görürsünüz. İmleçle başka bir yere gidersiniz ve yer paylaşımı kaybolur. Izgara yer paylaşımlarında farklı bir şey istedik: Aynı anda birden fazla ızgara vurgulanabilir ve ızgara yer paylaşımları açık kalarak üzerine geldikten sonra olan yer paylaşımları çalışmaya devam edebilir.
Örneğin:
Ancak Geliştirici Araçları'ndaki yer paylaşımı, bu çok öğeli, kalıcı mekanizma dikkate alınarak tasarlanmamıştır (uzun yıllar önce oluşturulmuştur). Bu nedenle, bunun işe yaraması için bindirme tasarımını yeniden düzenlememiz gerekti. Mevcut vurgulama araçları paketine yeni bir GridHighlightTool ekledik. Daha sonra bu paket, tüm kalıcı yer paylaşımlarının aynı anda vurgulanması için küresel bir PersistentTool haline geldi. Her kalıcı yer paylaşımı türü (Izgara, Esnek vb.) için kalıcı aracın içinde ilgili bir yapılandırma alanı tutarız. Yer paylaşımı vurgulayıcısı ne çizileceğini her kontrol ettiğinde, bu yapılandırmaları da içerir.
Geliştirici Araçları'nın nelerin vurgulanması gerektiğini kontrol etmesine izin vermek amacıyla Grid 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ğine ve nasıl çizileceğine dair bilgi içerir. Bu sayede, mevcut fareyle üzerine gelme davranışını bozmadan çok öğeli kalıcı bir mekanizma ekleyebiliriz.
Gerçek Zamanlı Tablo rozetleri
Geliştiricilerin ızgara 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ındaki ızgara kapsayıcılarını tanımlamasına da yardımcı olabilir.
DOM Ağacında Yapılan Değişiklikler
DOM Ağacı'nda göstermek istediğimiz tek rozetler Grid rozetleri olmadığından, rozet eklemeyi mümkün olduğunca kolaylaştırmak istiyoruz. Geliştirici Araçları'nda DOM Ağacı öğelerini ayrı ayrı oluşturup yönetmekten sorumlu olan ElementsTreeElement, rozetleri yapılandırmaya yönelik herkese açık birkaç yeni yöntem eklenerek güncellendi. Bir öğe için birden çok rozet varsa bunlar, rozet kategorilerine göre sıralanır. Aynı kategoride olan rozetler ise alfabetik olarak sıralanır. Kullanılabilir kategoriler arasında Security, Layout vb. bulunur ve Grid, Layout kategorisine aittir.
Ayrıca, başından itibaren yerleşik erişilebilirlik desteği sunuyoruz. Her etkileşimli rozetin varsayılan ve etkin bir aria-label sağlaması gerekir; salt okunur rozetlerin adları ise aria-label olarak kullanılır.
Gerçek zamanlı stil güncellemelerini nasıl aldık?
Çoğu DOM değişikliği, gerçek zamanlı olarak Geliştirici Araçları DOM Ağacı'na yansıtılır. Örneğin, yeni eklenen düğümler DOM Ağacında anında görünür ve 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 Geliştirici Araçları'nın bildirim alması mümkün olmadığından bu yöntemin uygulanması zordu. Bir öğenin ne zaman ızgara kapsayıcısı haline geldiğini ya da olmayı sonlandırdığını bilmenin tek mevcut yolu, tarayıcıda her bir öğenin güncel stil bilgilerini sürekli olarak sorgulamaktır. Bu işlem izin vermeyecek şekilde pahalı olur.
Bir öğenin stili güncellendiğinde kullanıcı arabiriminin bunu bilmesini kolaylaştırmak amacıyla stil güncellemeleri yoklaması için yeni bir CDP yöntemi ekledik. DOM düğümlerinin stil güncellemelerini almak için öncelikle tarayıcıya hangi CSS bildirimlerini izlemek istediğimizi söyleriz. Tablo rozetleri için tarayıcıdan şunları takip etmesini isteriz:
{
"display": "grid",
"display": "inline-grid",
}
Ardından bir yoklama isteği göndeririz. Öğeler panelindeki DOM düğümleri için izlenen stil güncellemeleri olduğunda tarayıcı, güncellenmiş düğümlerin listesini Geliştirici Araçları'na gönderir ve mevcut yoklama isteğini çözümler. Geliştirici Araçları, stil güncellemeleriyle ilgili tekrar bildirim almak istediğinde her düğümde arka ucu sürekli yoklamak yerine bu yoklama isteğini gönderebilir. Geliştirici Araçları, tarayıcıya yeni bir liste göndererek izlenmekte olan CSS bildirimlerini 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 bir listesini görmek ve düzenlerde hata ayıklamak için kalıcı yer paylaşımlarını kolayca açıp kapatmak isteriz. Bu nedenle, yalnızca düzen araçları için özel bir kenar çubuğu bölmesi oluşturmaya karar verdik. Bu şekilde, tüm ızgara container'larını toplamak ve ızgara yer paylaşımlarıyla ilgili tüm seçenekleri yapılandırmak için özel bir alan elde etmiş oluruz. Bu Düzen bölmesi, gelecekte düzen açısından yoğun araçları (ör. Flexbox, Container sorguları) da buraya koymamıza olanak tanır.
Hesaplanan stillere göre öğe bulma
Düzen bölmesinde CSS ızgara 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 Geliştirici Araçları tüm DOM düğümlerini bilmediğinden bu süreç de kolay olmadı. Bunun yerine Geliştirici Araçları, Devtools DOM Ağacı'nı başlatmak için yalnızca DOM hiyerarşisinin en üst seviyesinde yer alan düğümlerin yalnızca küçük bir alt kümesini bilir. Performans nedeniyle, diğer düğümler yalnızca başka bir istek üzerine getirilecektir. Bu durum, sayfadaki tüm düğümleri toplamak ve bunları 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 işlem, Geliştirici Araçları ön ucunun bir sayfadaki CSS ızgara kapsayıcılarının listesini almasını, muhtemelen iframe'leri ve gölge köklerini pierleme yapmasını ve bunları Düzen bölmesinde oluşturmasını sağlar.
Sonuç
CSS ızgara araçları, bir web platformu özelliğini destekleyen ilk geliştirici araçları tasarım aracı projelerinden biridir. Geliştirici Araçları'nda pek çok temel aracı (ör. kalıcı yer paylaşımları, DOM Ağacı rozetleri ve Düzen bölmesi) kullanıma sundu ve Chrome Geliştirici Araçları'nda Flexbox ve Container sorguları gibi gelecekte düzenlenecek düzen araçlarının önünü açtı. Ayrıca, geliştiricilerin Grid ve Flexbox hizalamalarını etkileşimli bir şekilde değiştirmelerine olanak tanıyan Grid ve Flexbox düzenleyicilerinin de temelini atmıştır. İleride bunlara değineceğiz.
Önizleme kanallarını indirme
Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.
Chrome Geliştirici Araçları ekibiyle iletişim kurma
Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.
- Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
- Geliştirici Araçları'ndaki Diğer seçenekler
> Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
- @ChromeDevTools adresinden tweet atabilirsiniz.
- Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.