G146: Folyékony arculat alkalmazása
Alkalmazhatóság
Az összes technológiára vonatkozik.
Jelen technika vonatkozik a(z):
Leírás
Jelen technika célja, hogy a rendelkezésre álló vízszintes térhez alkalmazkodó elrendezési technikák használatával képes legyen a tartalom megjelenítésére, vízszintes gördítő sávok bevezetése nélkül. A folyékony arculatok azokat az elrendezési területeket határozzák meg, melyek újraméretezésre kerülnek a szöveggel és szükség szerint ismét folyamatosak lesznek azért, hogy elférjenek a képernyőn. Habár a pontos elrendezés ennek következtében változik, az elemek kapcsolata és az olvasási sorrend ugyanaz marad. Ez hatásos módszer olyan kivitelezések létrehozásához, melyek jól jelennek meg a különböző eszközökön, illetve amelyek a felhasználók számára különböző betűméret beállításokat engednek.
A folyékony arculat alapelvei a következők:
-
Meghatározza az elrendezési területek méretét olyan egységek alkalmazásával, melyek a szövegre vonatkozóan a terület arányos méretezését eredményezik: tehát úgy növekednek vagy zsugorodnak, ahogy a szöveg növekszik vagy zsugorodik;
-
Szomszédos lebegő dobozok soraként helyezi el az elrendezési területeket, melyek szükség szerint új sorokba tördelődnek, hasonlóan ahhoz, ahogy a szavak a bekezdésekben.
Összetett folyékony arculatokat lehet elérni az elrendezési területek beágyazásával, ilyen módon hozva létre lokalizált folyékony arculatokat a nagyobb folyékony arculatokon belül. Még az egyszerű folyékony arculatok is igényelnek tervezési stílust a jó megjelenítés eléréséhez a szövegméretek széles skáláján. De a jól megtervezett folyékony arculatok a leghatásosabb oldaltervezések lehetnek.
Példák
Példa 1: Egyszerű folyékony arculat a HTML-ben és CSS-ben
A következő, meglehetősen egyszerű példában HTML-t és CSS-t alkalmaznak folyékony arculat létrehozásához. A három oszlop úgy szabályozza a méretét, ahogy a szöveg mérete módosul. Amikor a teljes vízszintes szélesség meghaladja a rendelkezésre álló oszlopszélességet, az utolsó oszlop megtörik azért, hogy alulra kerüljön és ne az előző oszlop mellé. A betűméretet növelni lehet vágás vagy vízszintes gördítő sáv bevezetése nélkül, mindaddig amíg a leghosszabb szó elfér az oszlopban. Ebben a bizonyos példában százalékos méreteket alkalmaznak az oszlopokhoz, és „lebegő” tulajdonságot használó lebegő területként határozzák meg őket.
Példa kód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example of Basic Liquid Layout</title>
<style type="text/css">
.column
{
border-left: 1px solid green;
padding-left:1%;
float: left;
width: 32%;
}
#footer
{
border-top: 1px solid green;
clear: both;
}
</style>
</head>
<body>
<h1>WCAG Example</h1>
<h2>Text in Three Columns</h2>
<div title="column one" class="column">
<h3>Block 1</h3>
<p> The objective of this technique is to be able to present content
without introducing horizontal scroll bars by using layout
techniques that adapt to the available horizontal space.
</p>
</div>
<div title="column two" class="column">
<h3>Block 2</h3>
<p> This is a very simple example of a page layout that adapts as the
text size changes.
</p>
</div>
<div title="column three" class="column">
<h3>Block 3</h3>
<p> For techniques that support more complex page layouts, see the
Források listed below.
</p>
</div>
<p id="footer">Footer text</p>
</body>
</html>
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
Jelenítsen meg tartalmat egy felhasználói programban.
-
Nagyítsa 200%-ra a tartalmat.
-
Ellenőrizze, hogy vízszintes görgetés nélkül elérhető-e az összes tartalom és funkció.
Várható eredmények
-
A #3 ellenőrzés teljesül.