Temel - Görünürlük Sınıfları
Açıklama
Foundation, aygıt yönüne (dikey ve yatay) veya ekran boyutuna (küçük, orta, büyük veya geniş ekran) dayalı öğeleri göstermek veya gizlemek için görünürlük sınıflarını kullanır.
Bir kullanıcının tarama ortamına göre öğeleri kullanmasına izin verir.
Aşağıdaki tablo, göz atma ortamlarına göre öğeleri kontrol eden Foundation'ın görünürlük sınıflarını listeler -
| Sr.No. | Görünürlük Sınıfı ve Tanımı |
|---|---|
| 1 | Ekran Boyutuna Göre Göster .Show sınıfını kullanarak aygıta dayalı öğeleri gösterir . |
| 2 | Ekran Boyutuna Göre Gizle .Hide sınıfını kullanarak cihazı temel alan öğeleri gizler . |
Foundation, .hide ve .invisible sınıflarını kullanarak içeriği gizleyebileceğiniz bazı sınıfları destekler ve sayfada hiçbir şey göstermez.
Oryantasyon Algılama
Cihazlar, yatay ve dikey işlevlerini kullanarak farklı yönleri belirleyebilir . Cep telefonları gibi elde tutulan cihazlar, onları döndürdüğünüzde farklı yönleri belirtir. Masaüstü için yön her zaman yatay olacaktır.
Ulaşılabilirlik
Aşağıdaki tablo, içeriği ekran okuyucular tarafından okunabilir hale getirirken gizleyen ekran okuyucular için erişilebilirlik tekniklerini listeler -
| Sr.No. | Erişilebilirlik Sınıfı ve Tanımı |
|---|---|
| 1 | Ekran Okuyucular için Göster Ekran okuyucularının okumasını engellerken içeriği gizlemek için show-for-sr sınıfını kullanır . |
| 2 | Ekran Okuyucular için Gizle Metni görünür kılan, ancak bir ekran okuyucu tarafından okunamayan aria-hidden özelliğini kullanır . |
| 3 | Atlama Bağlantıları Oluşturma Ekran okuyucu, sitenizin içeriğine gitmek için bir atlama bağlantısı oluşturacaktır. |
Sass Referansı
Foundation, CSS çıktısını görüntülemek için aşağıdaki karışımları kullanır, bu da bileşenleriniz için kendi sınıf yapısını oluşturmanıza olanak tanır -
| Sr.No. | Karıştır ve Açıklama | Parametre | Tür |
|---|---|---|---|
| 1 | show-for Varsayılan olarak, bir öğeyi gizler ve belirli ekran boyutunun üzerinde görüntüler. |
$ beden | Anahtar kelime |
| 2 | show-for-only Varsayılan olarak, bir öğeyi gizler ve kesme noktası içinde görüntüler. |
$ beden | Anahtar kelime |
| 3 | hide-for Varsayılan olarak, bir öğeyi gösterir ve belirli bir ekran boyutunun üzerinde gizler. |
$ beden | Anahtar kelime |
| 4 | hide-for-only Varsayılan olarak, bir öğeyi gösterir ve belirli bir ekran boyutunun üzerinde gizler. |
$ beden | Anahtar kelime |
Tüm bu karışımların varsayılan değeri yok olarak ayarlanacaktır .