Који веб читач поштује стандарде?

Ако сте се бар мало бавили HTML i CSS кодирањем сигурно сте наилазили на разне. некада и жустре полемике око поштовања стандарда и решавању проблема што веб читачи стандарде не поштују у потпуности а некада их и различито тумаче.

Давно сам престао да се тиме замарам. Не упињем се претерано да приликом израде сајта остварим поптуну истоветност приказа у свим читачима. Задовољан сам ако је изглед довољно сличан, а већ сам навикао шта треба да избегавам како бих умањио ову врсту проблема.

Показаћу један једноставан пример који илуструје колико су веб читачи мушичави и да им се свима не може угодити.

Ево примера HTML кода:

<div id="okvir">
<div id="polje">
<div id="sadrzaj">
</div>
</div>
</div>

А на њега ћемо применити следеће стилове:

#okvir {
    border: 1px solid #000000;
    background-color: #333333;
}

#polje {
    border: 1px solid #ff0000;
    background-color: #666666;
    width: 250px;
    height: 25px;
    margin: 5px;
    padding: 5px;

}

#sadrzaj {
    border: 1px solid #000000;
    background-color: #eeeeee;
    width: 100%;
    height: 100%;
}

Укратко, објекат okvir служи само томе да у њега сместимо објекат polje како бисмо могли да видимо положај објекта polje на основу подешених спољних растојања (margin), а објекат sadržaj служи само да покаже унутрашње растојање (padding) у оквиру објекта poljе.

Дакле, сва подешавања су у ствари на објекту poljе, а она су једноставна: објекат је широк 250 а висок 25 тачака, спољно растојање од других објеката је 5 тачака а и растојање унутрашњих објеката од ивице објекта poljе је 5 тачака. Просто да не може бити простије. Боје оквира и поља су ту да се лако разазна шта је шта.

Ево како се ово приказује у фајерфоксу 3 и експлореру 6:

Фајерфокс је очигледно величину унутрашњег одстојања објекта poljе додао на задату ширину објекта и тако добио коначну ширину објекта 260 тачака, што наравно није оно што је био циљ, а уз то очигледно и унутрашње растојање није испоштовао до краја – види се да је десно растојање мање него што треба да буде. Висина објекта је такође увећана за 10 тачака. Спољно растојање је испоштовано као што је и задато.

Интернет експлорер се понаша другачије. Он је, наиме, испоштовао задату ширину и висину објекта poljе, а унутрашње растојање је обезбедио науштрб унутрашњег простора, што је управо и очекивано понашање. Међутим, зато је спољње растојање испоштовано само са леве и десне стране, док га са горње и доње стране објекта нема.

Шта на основу овога закључити?

Ширина и висина објекта, и спољна и унутрашња растојања су основни елементи, који су вероватно највише коришћени у одређивању изгледа објеката у ХТМЛ документима уопште. Ако веб читачи ово не могу да испоштују, шта тек очекивати у компликованијим прохтевима?