Rozet referansı

Öğeler panelindeki rozetlerle ilgili bu kapsamlı referansla çeşitli yer paylaşımlarını açıp kapatın ve DOM ağacında gezinmeyi hızlandırın.

Rozetleri gösterme veya gizleme

Belirli rozetleri göstermek veya gizlemek için:

1. Geliştirici Araçları'nı açın.
2. DOM ağacındaki bir öğeyi sağ tıklayın ve Rozet ayarları alt menüsünde bir veya daha fazla rozeti işaretleyin.

Öğeler panelinde, seçilen rozetler DOM ağacındaki uygun öğelerin yanında gösterilir. Sonraki bölümlerde her rozet açıklanmaktadır.

View-source

view-source rozeti, HTML sayfasının kökündeki <html> etiketinin yanındadır. Sayfanızın kaynağını Kaynaklar panelinde görüntülemek için bu seçeneği tıklayın.

Bu rozet, Chrome'un sayfa bağlam (sağ tıklama) menüsündeki Sayfa Kaynağını Görüntüle seçeneğine alternatif bir iş akışı sağlar:

1. Chrome'da bir sayfayı sağ tıklayın > İncele'yi seçin.
2. Öğeler panelinde, <html> etiketinin yanındaki view-source rozetini tıklayın.
3. Kaynaklar panelinde sayfa kaynağını inceleyin.

Izgara

display CSS özelliği grid veya inline-grid olarak ayarlanmışsa HTML öğesi ızgara kapsayıcısı olur. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açıp kapatan grid rozetleri bulunur.

Aşağıdaki önizlemede yer paylaşımını açın veya kapatın:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki grid rozetini tıklayın ve yer paylaşımını inceleyin.

Yer paylaşımı; sütunları, satırları, bunların numaralarını ve boşlukları gösterir.

Izgara düzeninde hata ayıklamayı öğrenmek için CSS ızgarasını inceleme başlıklı makaleyi inceleyin.

Alt ızgara

Alt ızgara, üst ızgarasıyla aynı parçaları kullanan iç içe yerleştirilmiş bir ızgaradır. grid-template-columns, grid-template-rows özelliklerinden biri veya her ikisi subgrid olarak ayarlanmışsa öğe, alt ızgara kapsayıcısıdır. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açıp kapatan subgrid rozetleri bulunur.

Aşağıdaki önizlemede yer paylaşımını açın veya kapatın:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki subgrid rozetini tıklayın ve yer paylaşımını inceleyin.

Yer paylaşımı, bir alt ızgaranın sütunlarını, satırlarını, sayılarını ve boşluklarını gösterir.

Yaratıcılığınızı

display CSS özelliği flex veya inline-flex olarak ayarlanmışsa bir HTML öğesi flex kapsayıcıdır. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açıp kapatan flex rozetleri bulunur.

Aşağıdaki önizlemede yer paylaşımını açın:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki flex rozetini tıklayın ve yer paylaşımını inceleyin.

Yer paylaşımı, alt öğe konumlarını gösterir.

Flex düzenlerinde nasıl hata ayıklayacağınızı öğrenmek için CSS flexbox'ı inceleme ve hata ayıklama başlıklı makaleyi inceleyin.

Reklam

Geliştirici Araçları, bazı reklam çerçevelerini algılayıp etiketleyebilir. Bu tür çerçevelerin yanında ad rozetleri bulunur.

Aşağıdaki önizlemede bir reklamı keşfedin:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, yanında ad rozeti olan bir öğe bulun.

ad rozeti tıklanamaz ancak üzerine geldiğinizde öğenin neden reklam olarak tanımlandığıyla ilgili bağlam sağlayan bir ipucu metni görürsünüz. Örneğin:

• Komut dosyası soyu: Öğenin oluşturulmasında hangi komut dosyaları kullanıldı?
• Liste filtreleme kuralları: Bir filtreleme listesindeki (ör. EasyList) öğeyle veya yüklediği kaynakla eşleşen belirli kural.

Oluşturma sekmesini kullanarak reklam çerçevelerini kırmızı renkle vurgulayabilirsiniz.

Kaydırma

Bir HTML öğesinin overflow CSS özelliği scroll olarak ayarlanmışsa veya taşmaya neden olacak kadar içerik varsa auto olarak ayarlanmışsa bu öğe kaydırma kapsayıcısıdır. Bu tür öğelerin yanında scroll rozetleri bulunur.

Kaydırarak tutturma

Kaydırma kapsayıcıları, yakalama noktalarını yapılandıran CSS özelliklerine sahip olabilir. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açıp kapatan scroll-snap rozetleri bulunur.

Aşağıdaki önizlemede yer paylaşımını açın:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki scroll-snap rozetini tıklayın.
3. Öğeyi sağa kaydırıp yer paylaşımını inceleyin.

Yer paylaşımı, öğe konumlarını ve tutturma noktalarını gösterir.

Kapsayıcı

container-type CSS özelliğine sahip HTML öğeleri kapsayıcıdır. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açıp kapatan container rozetleri bulunur.

Aşağıdaki önizlemede yer paylaşımını açın veya kapatın:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki container rozetini tıklayın.
3. Öğeyi sağ alt köşesinden sürükleyerek yeniden boyutlandırmayı deneyin ve düzen değişikliği ile yer paylaşımını inceleyin.

Yer paylaşımı, alt öğe konumlarını gösterir.

Kapsayıcı sorgularında nasıl hata ayıklayacağınızı öğrenmek için CSS kapsayıcı sorgularını inceleme ve hata ayıklama başlıklı makaleyi inceleyin.

Alan

<slot> HTML öğesi, kendi içeriğinizle doldurabileceğiniz bir yer tutucudur. <template> öğesiyle birlikte <slot>, ayrı DOM ağaçları oluşturmanıza ve bunları birlikte sunmanıza olanak tanır. Yuva içerik öğelerinin yanında, ilgili yuvalara bağlantı olarak hizmet veren ink_selectionslot rozetleri bulunur.

Aşağıdaki önizlemede ink_selectionslot rozetini keşfedin:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, karşılık gelen yuvanın yerini belirlemek için öğenin yanındaki ink_selectionslot rozetini tıklayın.
3. ink_selectionreveal rozetini tıklayarak alanın içeriğine geri dönün.

Üst katman

Bu rozet, en üst katman kavramını anlamanıza ve görselleştirmenize yardımcı olur. Üst katman, z-index değerinden bağımsız olarak diğer tüm katmanların üzerinde içerik oluşturur. .showModal() yöntemini kullanarak bir <dialog> öğesi açtığınızda tarayıcı, bu öğeyi en üst katmana yerleştirir.

Öğeler paneli, üst katman öğelerini görselleştirmenize yardımcı olmak için kapanış </html> etiketinden sonra DOM ağacına bir #top-layer kapsayıcısı ekler.

En üst katmandaki öğelerin yanında ink_selectiontop-layer (N) rozetleri bulunur. Burada N, öğenin dizin numarasıdır. Rozetler, #top-layer kapsayıcısındaki ilgili öğelerin bağlantılarıdır.

Aşağıdaki önizlemede ink_selectiontop-layer (N) rozetini keşfedin:

1. Önizlemede İletişim kutusunu aç'ı tıklayın.
2. İletişim kutusunu inceleyin.
3. DOM ağacında, <dialog> öğesinin yanındaki ink_selectiontop-layer (1) rozetini tıklayın. Öğeler paneli, sizi kapanış </html> etiketinden sonra #top-layer kapsayıcısındaki ilgili öğeye götürür.
4. Öğenin veya ::backdrop öğesinin yanındaki ink_selectionreveal rozetini tıklayarak <dialog> öğesine geri dönün.

Medya

media rozeti varsayılan olarak devre dışıdır. Etkinleştirildiğinde <audio> ve <video> öğelerinin yanında görünür. Medya panelini açmak ve medyanızda hata ayıklamak için bu rozeti tıklayın.

Daha fazla bilgi için Medya paneliyle medya oynatıcılarında hata ayıklama başlıklı makaleyi inceleyin.

Pop-up

Popover, popover özelliği olan herhangi bir öğedir ve ipuçları, uyarılar, bildirimler gibi çok çeşitli etkileşimli desenler için kullanışlıdır. Bu tür öğelerin yanında popover rozetleri bulunur.

Bu rozet, yanında #top-layer kapsayıcısındaki ilgili öğelere bağlantı veren bir top-layer rozetini açar.

Aşağıdaki önizlemede popover rozetini keşfedin:

1. Önizlemede TOGGLE POPOVER'ı (Açılır Pencereyi Değiştir) tıklayın.
2. Görüntülenen popover'ı inceleyin.

3. DOM ağacında, <div popover> öğesinin yanındaki popover rozetini tıklayın. Öğeler panelinde top-layer rozeti gösterilir.

   

4. Üst katman bölümündeki adımları uygulayın.

Daha fazla bilgi için https://web.dev/learn/css/popover-and-dialog adresini de ziyaret edin.

Başlangıç stili

@starting-style kuralı, bir öğe sayfada oluşturulmadan önce öğedeki ilk stilleri tanımlar. Bu, display: none konumundan animasyonla giren öğeler için gereklidir. Çünkü bu öğelerin animasyonla gireceği bir duruma ihtiyacı vardır. Bu tür öğelerin yanında starting-style rozetleri bulunur.

Bu rozet, @starting-style kuralındaki stilleri değiştirir. Böylece animasyonu çalışırken görebilirsiniz.

Aşağıdaki önizlemede starting-style rozetini keşfedin:

1. Önizlemede AÇILIR PENCEREYİ AÇ'ı tıklayın.
2. Görüntülenen popover'ı inceleyin.

3. DOM ağacında, <div popover> öğesinin yanındaki starting-style rozetini açın.

   

4. Öğeler > Stiller sekmesinde animasyonun nasıl çalıştığını ve uygulanan stilleri inceleyin.

Daha fazla bilgi için Animasyonlu popover'lar başlıklı makaleyi de inceleyin.

Özel öğe

Tireli etiket adlarıyla tanımlanan özel HTML öğeleri veya özelleştirilmiş yerleşik öğeler için is="..." özellikleri, DOM ağacında yanlarında custom-element rozetleri bulunur.

Kaynaklar panelinde ilgili koda gitmek için rozeti tıklayın.