Ayrıntılar Öğesini Biçimlendiren ve Bunların Nasıl Çözüleceği İki Sorun

0
14

Çok uzak olmayan geçmişte, temel akordeon benzeri etkileşimler bile JavaScript olay dinleyicileri veya biraz CSS… hilesi gerektiriyordu. Ve kullanılan çözüme bağlı olarak, temeldeki HTML’yi düzenlemek karmaşıklaşabilir.

Şimdi

ve

öğeler (“açıklama pencere öğesi” olarak adlandırılan şeyi oluşturmak için birleşirler) bu bileşenlerin oluşturulmasını ve bakımını nispeten önemsiz hale getirdi.

Benim işimde sık sorulan sorular gibi şeyler için kullanıyoruz.

Oldukça standart soru / cevap formatı

Dikkate alınması gereken birkaç konu var

Genişlet ve daralt etkileşimi zaten

ve

HTML etiketleri, artık herhangi bir JavaScript veya CSS olmadan açıklama widget’ları oluşturabilirsiniz. Ama yine de biraz isteyebilirsin. Biçimsiz bırakıldı,

açıklama widget’ları bize iki konu sunuyor.

Konu 1:

imleç

Rağmen

bölüm etkileşimi davet ediyor, öğenin varsayılan imleci, beklediğiniz işaret parmağı yerine bir metin seçim simgesidir:

Metin imlecini alıyoruz, ancak bunun yerine işaretçinin etkileşimi göstermesini tercih edebiliriz.

Sorun 2: İç içe geçmiş blok öğeleri

Blok düzeyinde bir öğeyi (örneğin bir başlık) bir

öğesi, içeriği satır içinde tutmak yerine ok işaretinin altına iter:

Blok düzeyindeki öğeler, özet işaretleyiciyle alanı paylaşmaz.

CSS Sıfırlama düzeltmesi

Bu sorunları çözmek için, stil sayfalarımızın sıfırlama bölümüne aşağıdaki iki stili ekleyebiliriz:

ayrıntılar özeti {imleç: işaretçi; } ayrıntılar özeti> * {display: inline; }

Her sorun ve ilgili çözümü hakkında daha fazla bilgi için okumaya devam edin.

Değiştirme

imleç değeri

Kullanıcılar bir sayfadaki bir öğenin üzerine geldiklerinde, her zaman “o öğede beklenen kullanıcı etkileşimini yansıtan” bir imleç görmelerini isteriz.

Buna kısaca değindik.

öğeler etkileşimlidir (bir bağlantı veya form düğmesi gibi), varsayılan imleci bu tür öğeler için tipik olarak gördüğümüz işaret parmağı değildir. Bunun yerine, genellikle bir sayfaya metin girerken veya seçerken beklediğimiz metin imlecini alırız.

Bunu düzeltmek için imlecin değerini işaretçi olarak değiştirin:

ayrıntılar özeti {imleç: işaretçi; }

CodePen Embed Yedeklemesi

Bazı önemli siteler, stil oluştururken bu özelliği zaten içeriyor

elementler. Öğenin kendisindeki MDN Web Belgeleri sayfası tam olarak bunu yapar. GitHub ayrıca bir depoyu izleme, yıldız ekleme ve çatallama eylemleri gibi belirli öğeler için açıklama widget’larını kullanır.

GitHub imleci kullanır:

açıklama pencere öğesi menülerinin öğesi.

Varsayılan imleci tahmin ediyorum: metin değeri, özet metninin (bir ifşa etme gerecinin içeriğinin geri kalanıyla birlikte) kullanıcı tarafından seçilebileceğini belirtmek için seçildi. Ancak çoğu durumda, şunu belirtmenin daha önemli olduğunu düşünüyorum:

öğe etkileşimlidir.

İmleç değerini metinden işaretçiye değiştirdikten sonra bile özet metin hala seçilebilir. İmleci değiştirmenin, işlevselliğini değil, yalnızca görünümü etkilediğini unutmayın.

İç içe görüntüleniyor

satır içi içerik

Her birinin içinde

Daha önce paylaştığım SSS girişlerinin bölümünde soruyu genellikle uygun bir başlık etiketine eklerim (sayfanın ana hatlarına bağlı olarak):

Çocuğumun 504 Planı uygulanacak mı?

Evet. İlkbaharda olduğu gibi, vaka yöneticileri öğrencilere ulaşacak.

İçeride bir başlık yerleştirmek

birkaç nedenden dolayı yardımcı olabilir:

Tutarlı görsel stil. SSS sorularımın sayfalarımdaki diğer başlıklar gibi görünmesini seviyorum Başlıkları kullanmak, sayfa yapısını Internet Explorer kullanıcıları ve Edge’in Chromium öncesi sürümlerini desteklemeyen kullanıcılar için geçerli tutar

elementler. (Bu tarayıcılarda, bu tür içerik etkileşimli olmaktan çok her zaman görünür durumdadır.) Uygun başlıklar, yardımcı teknoloji kullanıcılarının sayfalar içinde gezinmesine yardımcı olabilir. (Bununla birlikte, içindeki başlıklar

unsurlar, aşağıda ayrıntılı olarak açıklandığı gibi benzersiz bir durum oluşturmaktadır. Bazı ekran okuyucular bu başlıkları oldukları gibi yorumlarlar, ancak diğerleri yapmaz.)

Başlıklar ve düğmeler

Unutmayın ki

eleman biraz garip bir ördek. Birçok yönden bir düğme gibi çalışır. Aslında, örtük bir role sahiptir = düğme ARIA eşlemesi. Ancak, düğmelerden çok farklı olarak, başlıkların doğrudan içine yerleştirilmesine izin verilir.

elementler.

Bu bizi – ve tarayıcı ve yardımcı teknoloji geliştiricileri – bir çelişki ile karşı karşıya getiriyor:

Başlıklara izin verilir

Sayfa içi gezinme yardımı sağlamak için öğeler. Düğmeler, iç içe geçmiş her şeyden (başlıklar gibi) anlamsallığı çıkarır.

Ne yazık ki, yardımcı teknolojiler bu durumu nasıl ele aldıkları konusunda tutarsızdır. NVDA ve Apple’ın VoiceOver’ı gibi bazı ekran okuma teknolojileri, içerideki başlıkları kabul eder

elementler. Öte yandan JAWS, yapmaz.

Bunun bizim için anlamı, bir başlık içine bir başlık koyduğumuzda

, başlığın görünümünü şekillendirebiliriz. Ancak, başlığımızın aslında bir başlık olarak yorumlanacağını garanti edemeyiz!

Başka bir deyişle, oraya bir başlık koymak muhtemelen zarar vermez. Her zaman yardımcı olmayabilir.

Her şeyi satır içi

Doğrudan bizim içinde bir başlık etiketi (veya başka bir blok öğesi) kullanırken

, muhtemelen görüntü stilini satır içi olarak değiştirmek isteyeceğiz. Aksi takdirde, başlığın yanında değil üzerinde görüntülenen genişlet / daralt ok simgesi gibi bazı istenmeyen kaydırmalarla karşılaşırız.

Aşağıdaki CSS’yi her başlığa – ve doğrudan içine yerleştirilmiş diğer öğelere satır içi bir görüntü değeri uygulamak için kullanabiliriz.

:

ayrıntılar özeti> * {display: inline; }

CodePen Embed Yedeklemesi

Bu teknikle ilgili birkaç not. İlk olarak, satır içi bloğu değil satır içi kullanmanızı öneririm, çünkü satır kaydırma sorunu, başlık metni bir satırın ötesine geçtiğinde satır içi blok ile hala devam ediyor.

İkincisi, iç içe yerleştirilmiş öğelerin görüntü değerini değiştirmek yerine,

elemanın varsayılan görünümü: display: flex ile liste-öğe değeri. En azından öyleydim! Ancak, bunu yaparsak, ok işareti kaybolacaktır. Hata!

Bonus ipucu: Internet Explorer’ı stillerinizden hariç tutma

Daha önce Edge’in Internet Explorer ve Chromium öncesi (diğer adıyla EdgeHTML) sürümlerinin desteklemediğinden bahsetmiştim.

elementler. Bu nedenle, bu tarayıcılar için çoklu dolgular kullanmıyorsak, özel açıklama pencere öğesi stillerimizin onlar için uygulanmadığından emin olmak isteyebiliriz. Aksi takdirde, tüm satır içi stilimizin elementi bozduğu bir durumla karşılaşırız.

Çizgide

başlıkların Internet Explorer ve EdgeHTML’de garip veya istenmeyen etkileri olabilir.

Artı,

Bu olduğunda öğe artık etkileşimli değildir, yani imlecin varsayılan metin stili işaretçiden daha uygundur.

Sıfırlama stillerimizin yalnızca uygun tarayıcıları hedeflemesini istediğimize karar verirsek, IE ve EdgeHTML’nin stillerimizin uygulanmasını engelleyen bir özellik sorgusu ekleyebiliriz. Yalnızca tarayıcıların desteklediği bir özelliği tespit etmek için @ support kullanarak bunu şu şekilde yapıyoruz:

@supports değil (-ms-ime-align: auto) {ayrıntı özeti {cursor: pointer; } ayrıntılar özeti> * {display: inline; } / * Artı herhangi biri

/

IE’nin göz ardı etmesini istediğiniz stiller. }

IE aslında özellik sorgularını hiç desteklemiyor, bu yüzden yukarıdaki bloktaki her şeyi göz ardı edecek, bu da sorun değil! EdgeHTML özellik sorgularını destekler, ancak -ms-ime-align’ı destekleyen tek tarayıcı motoru olduğu için blok içinde hiçbir şey uygulamaz.

Buradaki ana uyarı, Chrome’un (yani 12-27) ve Safari’nin (macOS ve iOS sürümleri 6-8) birkaç eski sürümünün de desteklenmesidir.

ancak özellik sorgularını desteklemez. Bir özellik sorgusu kullanmak, küresel kullanımın (Ocak 2021 itibariyle) yaklaşık% 0,06’sını oluşturan bu tarayıcıların, özel açıklama pencere öğesi stillerimizi de uygulamayacağı anlamına gelir.

@Supports değil (-ms-ime-align: auto) yerine @supports seçici (ayrıntılar) bloğu kullanmak ideal bir çözüm olacaktır. Ancak seçici sorgular, özellik tabanlı özellik sorgularından daha da az tarayıcı desteğine sahiptir.

Son düşünceler

HTML yapı setimizi aldıktan ve iki CSS sıfırlama stilimizi ekledikten sonra, tüm açıklama widget’larımızı istediğimiz gibi oluşturabiliriz. Bazı basit kenarlık ve arka plan rengi stilleri bile estetik ve kullanılabilirlik için uzun bir yol kat edebilir. Sadece özelleştirmenin

belirteçler biraz karmaşıklaşabilir!

CodePen Embed Yedeklemesi

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz