ch
- Data publikacji
- Ostatnio edytowano
Przeznaczenie jednostki ch
Długość wyrażona za pomocą jednostki ch obliczana jest przez przeglądarkę internetową na podstawie rozmiaru szerokości cyfry 0. Rozmiar szerokości cyfry 0 uzależniony jest między innymi od rodzaju czcionki tekstu (czyli od wartości właściwości font-family), jaką posiada dany element HTML.
"1ch" = rozmiar szerokości cyfry "0"
Jeżeli przeglądarka internetowa z jakiejś przyczyny nie może obliczyć długości wyrażonej za pomocą jednostki "ch", mimo że przeglądarka internetowa interpretuje jednostkę "ch", wtedy "1ch = 0.5em".
Przykład jednostki ch
width:30ch;
Mimo że do każdego przykładowego elementu "div" została dodana właściwość "width" wraz z tą samą wartością, czyli wartością "30ch", ostatecznie obliczony przez przeglądarkę internetową rozmiar szerokości obszaru zawartości przykładowych elementów "div" jest różny, ponieważ każdy z przykładowych elementów "div" posiada różny rodzaj czcionki tekstu określony za pomocą właściwości "font-family", a co za tym idzie rozmiar szerokości cyfry "0" może być różny dla każdego z poszczególnych rodzajów czcionki tekstu.
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
width:30ch;
margin-bottom:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#pierwszy {
font-family:serif;
}
#drugi {
font-family:sans-serif;
}
#trzeci {
font-family:monospace;
}
</style>
</head>
<body>
<div id="pierwszy">
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30ch", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30ch"
</div>
<div id="drugi">
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30ch", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30ch"
</div>
<div id="trzeci">
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30ch", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30ch"
</div>
</body>
</html>Interpretacja jednostki ch
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 9
-
tak
Zobacz więcej informacji o interpretacji jednostki ch.