Microsoft Edge DevTools'ta Kaynak Sipariş Görüntüleyicisi'ne Giriş

  • History |
  • |
  • 0 Yorum

Geçen yıl, tarayıcı yapımcılarının web geliştirici topluluğunun ihtiyaçlarını daha iyi anlamak için endüstriler arası bir çabaya katıldık, Web İstediğimiz Web. Bu çaba ile doğrulanan ilk ihtiyaçlardan biri Adrian Rosellitarafından gönderildi Geliştirici araçlarını kullanarak bir sayfada öğelerin kaynak sırasını görüntülemenin bir yolunuisteyen .

Bugün, Microsoft Edge DevTools'ta yeni bir deneysel Kaynak Sipariş Görüntüleyicisi'ni tanıtmaktan mutluluk duyarız. Microsoft Edge veya Google Chrome'un (85 veya daha yenisi) kanarya yapılarında deneysel DevTools özelliklerini etkinleştirerek bunu bugün deneyebilirsiniz.

Daha fazla bilgi edinin:

İstediğimiz Web

Ziyaret sayfası

Kaynak sipariş neden önemlidir?

Adrian, pitch videosunda ve diğer birkaç blog gönderisinde sorunu açıklamak için harika bir iş çıkardı, ancak işte hızlı bir özet:

Modern CSS düzen teknikleri ile web tasarımcıları, geleneksel düzenlerden çıkmak ve web'e yeni estetik getirmek için her zamankinden daha fazla güce sahiptir. Sorun, altındaki şeyin birçok kullanıcı için hala önemli olmasıdır. Örneğin, sayfa kaynağındaki içeriğin sırası, ekran okuyucular gibi yardımcı teknolojinin okuduğu tek şeydir. Bu yüzden altındakinin ekranda sergiledikleriniz kadar mantıklı olduğundan emin olmanız gerekir.

Aşağıdaki örneği göz önünde bulundurun:

CodePen'de

Christian Heilmann (@codepo8) tarafından kaleme alma kaynağı sipariş sorunu örneğine bakın.

Görsel olarak, her şey yolunda görünüyor - çorap giymek mantıklı, sonra bir gömlek, pantolon ve son olarak ayakkabı. Ancak, klavyeyi kullanarak belgeyi sekmeyle ilerlerseniz, farklı bir hikaye elde edersiniz.

Şimdi önce ayakkabılar, sonra pantolonlar, sonra gömlek ve son olarak çoraplar, sayfadaki düzene uygun değil ve istediğiniz gibi olmayabilir.

Gören kullanıcılar için bu çok fazla karışıklığa neden olmayabilir. Ancak, ekran okuyucuya bağımlı bir kullanıcı için içerik artık mantıklı olmayabilir.

Suçlu, belgedeki kaynak sıranın ekranda görüntülenenle eşleşmemesidir. Aşağıdaki kodda, HTML öğeleri tek bir hiyerarşi kullanarak sıralar. Ekran okuyucular bu hiyerarşiyi kullanır.

Ancak, ekrandaki görüntüleme sırası CSS'de display:flex ve order kullanılarak tanımlanır:

Daha önce, bunu test etmenin tek yolu klavyeyi kullanarak sayfanızda gezinmek veya bir ekran okuyucuyla test etmekti. Yeni Kaynak Sipariş Görüntüleyicisi, sayfaya üst üste bindirilmiş kaynak sırasını görmenizi sağlar. Etkinleştirme seçeneğini DevTools'un erişilebilirlik bölmesinde bulabilirsiniz.

Microsoft Edge DevTools'ta Kaynak Sipariş Görüntüleyicisi. Görüntüleyiciyi etkinleştirme seçeneği vurgulanır ve sayfada yer alan sayılar kaynak sırayı gösterir.

Kaynak Sipariş Görüntüleyicisi yer paylaşımı etkinleştirildiğinde, artık listeyi 4 ile başlayıp ters sırada görebiliriz, bu da bir şeylerin yanlış olduğunun sinyallerini alır. Bunu çözmek için, HTML kaynağındaki öğelerin sırasını mantıksal düzenleriyle eşleşecek şekilde düzeltebilir ve görsel düzenlerini CSS aracılığıyla gerektiği gibi yeniden düzenleyebiliriz - tam tersi yerine.

Sonra bunu okuyun:

Kanarya'da Kaynak Sipariş Görüntüleyicisi

Adrian Roselli

Kaynak sipariş görüntüleyici denemesini açma

Deneysel özellikleri etkinleştirerek microsoft edge'in kanarya yapısında kaynak sipariş görüntüleyiciyi bugün deneyebilirsiniz. Bunun nasıl yapacağı hakkında ayrıntılı bilgiyi resmi belgelerde bulabilirsiniz.

Bu şu anda bir deneydir - bu konudaki düşüncelerinizi ve deneyimi geliştirmek için neler yapabileceğimizi duymak isteriz. Twitter'daki Edge Geliştirici Araçları ekibine @edgedevtools olarak ulaşabilir veya geliştirici araçlarında yerleşik olarak yer alan geri bildirim mekanizmasını kullanarak bizimle iletişime geçebilirsiniz (DevTool'lar açıkken Alt+Shift+I).

– Chris Heilmann, Baş Program Yöneticisi, Microsoft Edge