Rozet referansı

Sofia Emelianova
Sofia Emelianova
GitHub

Öğ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.

"Badge settings" (Rozet ayarları) menüsü.

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

Kaynağı görüntüleme

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 düğmeyi tıklayın.

&quot;Kaynağı görüntüle&quot; rozeti.

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ışı sunar:

  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

Bir HTML öğesinin display CSS özelliği grid veya inline-grid olarak ayarlanmışsa bu öğe ızgara kapsayıcı 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:

(Codepen'de sofiayem tarafından oluşturulan Pen YzarzKV adlı kalem)
  1. Önizlemede öğeyi inceleyin.
  2. DOM ağacında, öğenin yanındaki grid rozetini tıklayın ve yer paylaşımını inceleyin.

Izgara yer paylaşımı.

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 Izgara

Alt ızgara, üst ızgarasıyla aynı izleri kullanan iç içe yerleştirilmiş bir ızgaradır. Bir öğenin grid-template-columns ve grid-template-rows özelliklerinden biri veya her ikisi de subgrid olarak ayarlanmışsa bu öğe bir 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:

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

Alt ızgara yer paylaşımı.

Yer paylaşımı, 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:

(Codepen'de sofiayem tarafından oluşturulan XWEeWdb adlı kalem)
  1. Önizlemede öğeyi inceleyin.
  2. DOM ağacında, öğenin yanındaki flex rozetini tıklayın ve yer paylaşımını inceleyin.

Esnek yer paylaşımı

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

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

DevTools, 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 bulunan bir öğe bulun.

Reklam rozeti.

ad rozeti tıklanamaz ancak Oluşturma sekmesini kullanarak reklam çerçevelerini kırmızı renkte vurgulayabilirsiniz.

Kaydırma

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

DOM ağacı düğümünde kaydırma rozeti.

Kaydırarak tutturma

Kaydırma kapsayıcıları, CSS özellikleri ile tutturma noktalarını yapılandırabilir. 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:

(Kalem eYMGYLz - Codepen'de sofiayem)
  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.

Kaydırmayı tutturma yer paylaşımı.

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

Kapsayıcı

Bir HTML öğesi, container-type CSS özelliğine sahipse 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:

(Kalemi görüntüleyin Pen mdxByda by sofiayem on Codepen)
  1. Önizlemede öğeyi inceleyin.
  2. DOM ağacında, öğenin yanındaki container rozetini tıklayın.
  3. Öğenin sağ alt köşesini sürükleyerek yeniden boyutlandırmayı deneyin ve düzen değişikliğini ve yer paylaşımını gözlemleyin.

Kapsayıcı düzeni.

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. Slot içerik öğelerinin yanında, ilgili slotlara bağlantı olarak kullanılan slot rozetleri bulunur.

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

(Codepen'de sofiayem tarafından oluşturulan Pen OJvxyzB adlı kalem)
  1. Önizlemede öğeyi inceleyin.
  2. DOM ağacında, ilgili yuvanın yerini belirlemek için öğenin yanındaki slot rozetini tıklayın. Rozetleri yerleştirip gösterin.
  3. reveal rozetini tıklayarak yuvadaki içeriğe geri dönün.

Üst katman

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

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

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

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

(Codepen'de sofiayem tarafından oluşturulan ExEGRvR adlı kalem)
  1. Önizlemede İletişim kutusunu aç'ı tıklayın.
  2. İletişimi inceleyin.
  3. DOM ağacında <dialog> öğesinin yanındaki top-layer (1) rozetini tıklayın. Öğeler paneli, kapatma </html> etiketinden sonra sizi #top-layer kapsayıcısındaki ilgili öğeye yönlendirir. En üst katman kapsayıcısı ve rozeti.
  4. Öğenin yanındaki veya ::backdrop simgesinin yanındaki reveal 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.

Rozet ayarlarında etkinleştirilen ve video öğesinin yanında gösterilen medya rozeti.

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ındaki top-layer rozetini açıp kapatır. Bu rozet, #top-layer kapsayıcısındaki ilgili öğelere bağlantı verir.

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

  1. Önizlemede TOGGLE POPOVER'ı (Açılır Pencereyi Aç/Kapat) 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.

    Popover özelliği olan öğenin yanındaki popover rozeti.

  4. `En ü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 gelen öğeler için gereklidir. Çünkü bu öğelerin animasyonla gelmek için 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 veya kapatın.

    @starting-style kuralına sahip öğenin yanındaki starting-style rozeti.

  4. Animasyonu çalışırken ve uygulanan stilleri Öğeler > Stiller sekmesinde inceleyin.

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