/w3c/ Standardy w Operze

w dziale Opera
daroc napisał(a):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<div style="width:10px; padding-right:100px; background:#EEE">a</div>

Taki kod Opera wyświetla poprawnie. Jednak po zmianie na Transitional Opera 7.50 wyświetla pudełko o szerokości 10px, zamiast 10+100px...
Czy w najnowszej wersji Opery jest tak samo?

UPDATE:

http://www.w3.org/TR/CSS1.html#formatting-model
The size of the box is the sum of the element width (i.e. formatted text or image) and the padding, the border and the margin areas.

Ryszard napisał(a):

Wydaje mi się, że gdybyś dał dwa w swojej wypowiedzi linki do dwóch stron testowych, to oprócz odpowiedzi "słownej" miałbyś jeszcze zrzuty - jak te strony widzi Opera 7.52
Bo z obrazka, który dodaję pewnie Ci nic.

14opera.png

daroc napisał(a):

Wklej do dowolnej strony, zapisz, odśwież - i masz...
Wrzuciłbym to na FTP, ale teraz mam trochę problemów z kompem, więc niebardzo mogę...

Zobacz na screena:
1. Przy strictcie wyświetla się dobrze.
2. Przy transitionalu już źle...
3. Quirk-mode - źle...

UPDATE: Nie wiem, po co mi dałeś tego screena, skoro ja tę stronę już przeczytałem sam - i wynika z niej, że tylko w punkcie 1. Opera zachowała się tak, jak powinna..

5screen.gif

pablik napisał(a):

Chyba dlatego, że wykroiłeś URL-a z nagłówka. Spróbuj go wstawić.

edit:
patrz tutaj: http://www.opera.com/docs/specs/doctype/

daroc napisał(a):

Rzeczywiście, teraz wszystko jest OK!
Tylko pytanie - dlaczego? Na webmaster.helion.pl czytałem, że można pominąć URL... I chyba lepiej by było, żeby Opera trzymała się standardów także przy braku URLa...

Na tej stronie autor pisze:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Prolog ten deklaruje dokument jako zawierający wszelkie możliwe elementy i atrybuty HTML, łącznie ze schyłkowymi. Specyfikacja HTML sama posługuje się właśnie tym prologiem. Sugerujemy używanie tej postaci prologu - właśnie dzięki niej można między innymi poprawnie wyświetlać kolorowe suwaki.

pablik napisał(a):

Chyba źle zrozumialeś, co jest tam napisanie. Oni nie sugerują omijania URL-a, tylko używanie wersji Transitional.
Wydaje mi się, że kiedyś wyczytałem na W3C, że ominięcie adresu URL jest możliwe, jednak nie zalecane. Nie potrafię znaleźć tego fragmentu.

quiris napisał(a):

Zacznę wykład od tego, że istnieją dwie szkoły liczenia szerokości pudełka w CSS:
1) Zgodny ze standardami, gdzie szerokość width jest szerokością gołej zawartości: http://www.w3.org/TR/CSS21/box.html#content-width z pominięciem dopełnienia (padding) oraz szerokości ramki (border)
2) lansowany przez M$ tzw. tradycyjny, gdzie szerokość jest liczona jako odległość pomiędzy lewą i prawą ramką, czyli wliczona jest oprócz szerokości zawartości, także wartość prawego i lewego dopełnienia oraz szerokości prawej i lewej ramki.

Ponieważ, oba modele zyskały podobną popularność, zaproponowano, aby CSS3 zawierał właściwość pozwalającą autorowi strony wybrać odpowiadający mu model: box-sizing: border-box || content-box (http://www.w3.org/TR/css3-box/#the-box-width). Opera eksperymentalne już dziś zawiera obsługę tej właściwości: http://www.opera.com/docs/specs/

Jedziemy dalej. Nie wszyscy pewnie wiedzą, ale Opera od wersji 7.x oferuje dwa typy sposobu renderowania strony (http://www.opera.com/docs/specs/doctype/):
1) Standards Mode, tryb zgodności ze standardami W3C
2) Quirks Mode, tryb zgodności z dziwactwami MSIE

W pierwszym trybie opera domyślnie renderuje pudełka w trybie zgodności ze standardami, czyli szerokość elementu odpowiada szerokości zawartości: box-sizing: content-box
W drugim przypadku jest to model MSIE: box-sizing: border-box

Przełączanie trybów renderowania zależy od definicji DTD danego dokumentu. Na stronie: http://www.opera.com/docs/specs/doctype/ znajdziemy tabelę obrazującą zależności typu renderowania od rodzaju DTD.
Omawiany DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> włącza tryb Standards Mode wtedy, gdy dodatkowo będzie obecny URL: "http://www.w3.org/TR/REC-html40/loose.dtd"
W przypadku jego braku włączany jest tryb Quirks Mode.
Kolorowe suwaki są dostępne wyłącznie w trybie Quirks Mode, stąd właśnie taka porada w tym kursie. IMHO: Kurs HTMLa powinien opisywać standard, a nie jakieś tam wymysły M$.

daroc napisał(a):

Originally posted by pablik
Chyba źle zrozumialeś, co jest tam napisanie. Oni nie sugerują omijania URL-a, tylko używanie wersji Transitional.


Chyba dobrze zrozumiałem...

Niektórzy autorzy stron dodają jeszcze sieciowy adres tej wersji DTD (ma on służyć do ewentualnego pobrania definicji przez przeglądarkę), choć nie jest to bezwzględnie konieczne - nawet specyfikacja HTML nie podaje tego adresu.


Później jest wyróżniony prolog bez URL-a i napisane, że zalecają właśnie taki.

Czyli autor zaleca prolog niezgodny ze standardami, aby można było zrobić kolorowe suwaki (?)...

Jakub81 napisał(a):

Niestety kurs P.W. nie jest najlepszy do nauki standardów.