Ostatnio edytowany:

ch

Autor: Virtual Patriot

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żniona 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;
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"
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"
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"

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:#CBFFFF;
      }

      #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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji jednostki .