Starší komentáře ke článku: Implementační chyby v prohlížečích - chybné rozměry boxů

Zpět na článek | Úvodní stránka Interval.cz

Avatar

Autor komentáře: hys

Datum vložení: 9.1.2004 0:53:06

"Internet Explorer 6 očekává DOCTYPE na úplném začátku dokumentu. Pakliže je u XHTML dokumentu deklarováno kódování (pokud je odlišné od UNICODE, pak deklarováno být musí), přepne se do režimu zpětné kompatibility. Řešením je změna nastavení serveru, aby vracel XHTML dokumenty s HTTP hlavičkou Content-Type: application/xhtml+xml. Nevýhodou tohoto řešení ovšem je, že některé starší prohlížeče dokument s touto hlavičkou nezobrazí."

A ktere verze IE dokument zobrazi ?, ja bych rek ze zadna :)

Avatar

Autor komentáře: Jan Bien

Datum vložení: 9.1.2004 8:04:52

Ano vlastně, další chyba IE je, že dokument application/xhtml+xml vůbec nezobrazí. Dost nepříjemná nepřenost, budu muset trošku poopravit.

Avatar

Autor komentáře: Martin Zikmund

Datum vložení: 9.1.2004 15:52:15

Nerozumím, já tento typ dokumentu používám a nikdy jsem s IE neměl problém.. testuji IE 5.01+
Prosím, rozveďte to.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 9.1.2004 18:53:38

Dokument, který je vracen společně s hlavičkou Content-Type: application/xhtml+xml IExplorer nevyrendruje. Při nejlepší vůli zobrazí takový ten rozevírací/zavírací stromeček.

Avatar

Autor komentáře: Ritchie

Datum vložení: 9.1.2004 14:14:50

Neznám žádné kódování Unicode, pouze takovou znakovou sadu. XML deklarace kódování nemusí předcházet při kódování UTF-8 a UTF-16.

Avatar

Autor komentáře: Jméno a příjmení

Datum vložení: 9.1.2004 18:52:54

Jistě. A ještě lépe řečeno: XML deklarace kódování nemusí předcházet v případě, že je XML dokument ve znakové sadě UNICODE, že?

Avatar

Autor komentáře: Jirka Kosek

Datum vložení: 13.1.2004 10:39:24

XML dokument má jako znakovou sadu vždy Unicode/ISO 10646.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 13.1.2004 10:55:18

To je, vlastně, fakt. Díky za upozornění. Takže se opravuji: Jiné kódování, než UTF-8 a UTF-16, MUSÍ být v XHTML dokumentu deklarováno.

Avatar

Autor komentáře: Martin Zikmund

Datum vložení: 9.1.2004 0:55:20

Zajímavý článek, autor ovšem zapomněl uvést jeden relativně nový, ale za to občas velmi užitečný CSS trik.
Doporučuji pročíst.
<a href='http://www.pixy.cz/blog/2003_11_archiv.html#1069419461' target='_blank'>http://www.pixy.cz/blog/2003_11_archiv.html#1069419461</a>
Uvítal bych více článku s touto tématikou.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 9.1.2004 8:07:43

Já tento CSS trik znám, ale nepovažujiho za bezpečný. Víme my, zda za pár měsíců nebude součástí nové specifikace i jakási vlastnost _width?

Avatar

Autor komentáře: Martin Snížek

Datum vložení: 9.1.2004 13:24:44

Já bych se ani nebál, že _width bude někdy ve specifikaci. Spíš bych tento hack nepoužíval z toho důvodu, že se tím CSS stane nevalidním -- sice bez problémů parsovatelným, ale nevalidním.

K článku bych jen doplnil, že Tantekův hack je často rychlejší použít v kratší podobě:

width: 220px; /* šířka pro IE 5.x */
wid\th: 200px; /* šířka pro schopné prohlížeče */

Jen je třeba dávat pozor, aby to lomítko nebylo před písmeny a, b, c, d, e, f -- jinak by byla sekvence považována za hexadecimální číslo.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 9.1.2004 14:08:38

Ale to není Tantekův hack, to je Simplified Box Model Hack.

Váš příklad lze použít jen, když jede IE6 v quirk režimu. Ale jestliže jede ve standadním režimu, tak to nejde, protože wid\th ignoruje i šestka. Také bych se bál budoucí verze IE, nevím jak k tomu bude přistupovat.

Vhodné je to použít zároveň se selektorem * :
* html #sample
{
width: 210px; /* pro Win IE 5.x */
\width: 150px; /* pro všechny ostatní prohlížeče */
}

Avatar

Autor komentáře: Martin Snížek

Datum vložení: 16.1.2004 12:43:20

"<I>Ale to není Tantekův hack, to je Simplified Box Model Hack.</I>"

Box model hack je, pokud vím, právě ten Tantekův hack, takže tohle je zjednodušený Tantekův hack. Ale o jména hacků se tu snad nebudeme přít ;-)

"<I>Váš příklad lze použít jen, když jede IE6 v quirk režimu. Ale jestliže jede ve standadním režimu, tak to nejde, protože wid\th ignoruje i šestka.</I> "

IE 6 ve standardním režimu zpracuje wid\th bez problémů, alespoň podle mých zkušeností. Já ten zjednodušený hack používám všude, kde to jde, klasického Tanteka už mě nebaví psát ;-)

Avatar

Autor komentáře: Martin Zikmund

Datum vložení: 9.1.2004 16:22:59

<I>Já bych se ani nebál, že _width bude někdy ve specifikaci. Spíš bych tento hack nepoužíval z toho důvodu, že se tím CSS stane nevalidním -- sice bez problémů parsovatelným, ale nevalidním.</I>

Ano, máte pravdu, existuje tedy ještě jeden mně známý trik, kterým lze docílit zobrazení vlastnosti pouze v IE a přitom tím zachovat validitu.

* html .prvek {vlastnost: hodnota;}

na tento selektor reaguje pouze IE 5+ z Win, Mac OS X i Macintosh

Avatar

Autor komentáře: Jméno a příjmení

Datum vložení: 9.1.2004 18:52:31

Můžete to potvrdit nějakým dalším zdrojem?

Avatar

Autor komentáře: Jan Brasna

Datum vložení: 9.1.2004 19:47:56

<a href='http://centricle.com/ref/css/filters/' target='_blank'>http://centricle.com/ref/css/filters/</a>

Avatar

Autor komentáře: Vita

Datum vložení: 9.1.2004 18:26:09

Eh, podle css 2.1 bude validni - tedy dle normy. Validator to nejak nezkousne, zrejme jeden z mnoha bugu :)

Avatar

Autor komentáře: Dave G

Datum vložení: 10.1.2004 17:04:28

pouzití _width je valitni, prectete si dokumentaci k CSS.

Explorer jako width povazuje i nasledujici varianty:
_width
__width
_--__--_width
atd...

Avatar

Autor komentáře: Martin Snížek

Datum vložení: 16.1.2004 12:52:03

"<I>pouzití _width je valitni, prectete si dokumentaci k CSS. </I>"

Specifikaci CSS jsem četl mnohokrát a ani jednou jsem se tam s vlastností _width nesetkal. Vy ano? Budu rád, pokud mě na ní odkážete...

A pokud tedy vycházím z předpokladu, že _width ve specifikaci CSS nikde není, potom je CSS dokument, který tuto vlastnost používá, nevalidní. Jak říkám, s parsovatelností zde problém není (v tokenizaci je podtržítko u identifikátorů povolené), ale je <B>nevalidní.</B>

Avatar

Autor komentáře: Petr Pechacek

Datum vložení: 28.2.2004 22:36:43

Nemyslim si ze je na _width neco nevalidniho. Browser ma nezname vlastnosti ignorovat a _width je proste jen neznama vlastnost.

Avatar

Autor komentáře: cyxt

Datum vložení: 9.1.2004 8:55:49

nechapu, proc se timhle clankem nekdo zabyva...
pokud existuje tolik nekompatibilit a nestandardu vcetne mizive podpory prohlizecu, tak nechapu, proc delat neco pomoci CSS a osetrovat milion chyb, kdyz staci udelat tabulku,ktera se zobrazi vsude stejne!!!
Rikam to furt TAb layout RULEZZ a bude dokud nebude CSS3 a pochopitelne jeho podpora prohlizeci...do te doby je CSS layout jen moderni , trebdova zalezitost,ktera nema sanci na preziti

Avatar

Autor komentáře: Jan Bien

Datum vložení: 9.1.2004 9:04:47

IE6 tady s námi bude zřejmě ještě hodně dlouho a nové trendy vyžadují plně přístupný web nejen z PC, ale i z mobilních a jiných zařízení. A abychom mohli dostát požadavkům vyplívajícím z nových trendů, nemáme jinou cestu, než skrze CSS layouty u kterých musíme myslet na ty chybky a nedokonalosti.

Avatar

Autor komentáře: jjj

Datum vložení: 9.1.2004 10:13:54

Na prd není, ale je natolik nedomyšlené, že někdy jsou opravdu tabulky nejlepší. Třeba řešit vícesloupcový layout pomocí plovoucích divů v css je občas docela porod, protože plovoucí elementy jsou určeny na věci typu obtékání obrázků, ale ne pro layout, který má držet a mít třeba čtyři sloupce stejně dlouhé. A když reálně zvážíme, kolik lidí bude na daný web přistupovat z PDA nebo mobilu v nejbližších dvou letech (=životnost kódu běžného webu), a kolik času ušetříme tím, že se základní rozvržení stránky nacpe do tabulky, tak to css zas až tak cool kolikrát není

Avatar

Autor komentáře: Jan Bien

Datum vložení: 9.1.2004 10:37:34

CSS není na nedomyšlené :-) CSS je jen málo a špatně implementované. "Floatování" skutečně není určené k Tvorbě layoutů, nehledě na to, že je poměrně náročné na výkon procesoru - u starých pentií může být takový web pro svou v uvozovkách "rychlost" zcela nepoužitelný.

K PDA a mobilům přidejme ještě čtečky a budoucí vyhledávače. Nesmíme zapomenout na finanční úspory při redesignování čistého CSS webu oproti tabulkám a někdy i úspory v přenesených datech. Nepopírám však, že existují případe, kdy jsou tabulky plně vyhovující a jejich jednorázové použití je levnější, než použití CSS.

Avatar

Autor komentáře: jjj

Datum vložení: 9.1.2004 13:17:36

Máte pravdu, já chtěl trochu píchnout do hnízda css dogmatiků :-)

On i CSS web má samotné HTML - zejména při používání float elementů - strukturované v závislosti na tom, jak má vypadat, ale i tak je případný redesign daleko jednodušší než u spleti tabulek.

Avatar

Autor komentáře: miroslav.kucera

Datum vložení: 9.1.2004 22:37:34

Divne, ja z floatovanymi sloupci nemel problem ani na PDA s mizernym vykonem. Narozdil od webu presypanych tabulkami.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 10.1.2004 23:16:08

To by možná stálo za nějaký test. Záleží zřejmě na tom kterém prohlížeči. Já mám zkušenosti s IE 5+.

Avatar

Autor komentáře: Dave G

Datum vložení: 10.1.2004 17:12:57

S temi vyssimi naroky na procesor v pripade floatu, jde jen o vseobecne rozsirenou famu :-)

Avatar

Autor komentáře: Jan Bien

Datum vložení: 10.1.2004 23:14:32

To je zajímavé. Ovšem já si ověřil, že floatování je náročnější. A u oněch zmíněných starých Pentií (100MHz) je zbrždění (zejména při více obtékáních) citelně znát. Záleží ovšem na konkrétním boxu a jeho obsahu.

Avatar

Autor komentáře: dgx

Datum vložení: 12.1.2004 2:08:01

Dívám se na problém spíš z pohledu programátora, a z jako takového je mi zcela jasné, že vykreslení dokumentu s floatem musí být náročnější. Ale téměř minimálně !. Zvláště ve srovnání s dalšími úkoly, které prohlížeč řeší. Například zobrazování písma (tedy vektorového písma, s případným antialiasingem), interpretace javascriptu, resamplování obrázků, apod. To jsou věci, které dnes považujeme za samozřejmé, ale jde o malé programátorské zázraky.
 
Zarovnat text kolem floatu uměl perfektně i Aldus Pagemaker, sázecí program, který pamatuju z dob IBM PC XT. A neměl s tím žádný problém. Nemají s tím problém ani kapesní počítače a chytré telefony. Ale to neznamená, že bych nějak zpochybňoval Vaše měření na starých Pentiích. Spíš bych hledal problém v tom, že u starých pentií bývají staré videokarty, které mohou být příčinou zpomalení.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 12.1.2004 8:46:17

Vaše programátorské hledisko nevyvracím. Děkuji za něj. Své tvrzení proto redukuji na moje subjektivní zkušenosti a na Internet Explorer. Opravdu se mi, zejména v IE 5.5, ukázalo floatování proti aboslutnímu pozicování výrazně! náročnější. Šlo o poměrně složitou úlohu - dlouhé obtékané boxy. Asi z toho IE dělá větší vědu, než to je. Také uznávám, že JavaScript bývá poměrně náročný - ale opět záleží na tom kterém kódu.

Na to všechno je z hlediska použitelnosti myslet - právě proto jsem na to upozornil. Dnes každý testuje ve všech Explorerech (<a href='http://www.mraveniste.org/weblog/2003-11.html#1068230219)' target='_blank'>http://www.mraveniste.org/weblog/2003-11.html#1068230219)</a>, Mozille, Opeře atd.. ale málokdo testuje i na Pentium 200MHz (nemluvě o pomalejším). A přitom takové počítače stále existují.

Avatar

Autor komentáře: dgx

Datum vložení: 14.1.2004 0:31:34

No ja jsem specialne kvuli temto ucelum koupil Pentium II / 400MHz. Na 200 lze snadno podtaktovat, ze... V html jsem nijake vyraznejsi prekvapeni nenasel, ale ten FLASH.... to je hruza. Uvazuju, ze vytvorim nejaky sikovnejsi detektor flashe, ktery krome pritomnosti pluginu pro prehravane take zjisti, jestli vykon pocitace je dostatecny.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 14.1.2004 8:11:02

A než detekovat, není lepe dát přímo uživateli na výběr a na úskalí ho upozornit?

Avatar

Autor komentáře: dgx

Datum vložení: 14.1.2004 19:22:27

Ale to upozorneni by nemelo navstevnika stranky rusit, resp. hned otravovat s dotazem, zda FLASH ano ci ne. Kdyz uz pouzivam FLASH, snazim se, aby to prineslo navstevnikovy pouze vyhody - to znamena lepsi graficky zazitek a mensi objem prenesenych dat. (Takze treba misto loga firmy v GIF vlozim logo v SWF, ale zadne FLASHove intra a podobne nesmysly!)
Detekce FLASHe by proto mela probehnout zcela transparentne. (samozrejme, uzivateli rad nabidnu moznost pouziti FLASHe uzivatelsky zablokovat a tuto skutečnost zaznamenat do cookies). A tady prave uvazuju, ze by bylo vhodne detekci upravit, aby brala v potaz i vykon pocitace.... Ale to uz je docela mimo tema, co? :-)

Avatar

Autor komentáře: Jan Bien

Datum vložení: 14.1.2004 21:25:32

Jistě, rozumím Vám a v podstatě s Vámi souhlasím. Váš nápad není špatný, jen o ušetřené velikosti bych pochyboval. Protože jestliže budete zaměňovat javaScriptem obrázek za FLASH, tak se obrázek stejně načte. Nicméně, ja jste naznačil, už jsme v out topic.

Avatar

Autor komentáře: Marek Prokop

Datum vložení: 9.1.2004 14:01:53

Docela by mne zajímalo, kolik ze zastánců tabulek, kteří tvrdí, že "staci udelat tabulku, ktera se zobrazi vsude stejne," skutečně někdy vymyslelo vlastní tabulkový layout bezproblémově fungující a shodně se zobrazující ve všech prohlížečích. Já si dodneška pamatuju, jak jsem se někdy v 95-96 roce mořil se svým prvním tabulkovým layoutem (tehdy to byla horká novinka) a jak mi to vůbec nešlo. Vždy, když už jsem myslel, že mám vyhráno, objevila se nějaká "drobnost", která celý layout rozvrátila.

Dnes už sice prakticky vymřely čtyřkové prohlížeče, takže možná jde udělat tabulkový layout snáze, jenže na druhou stranu od té doby nároky na kvalitu webových stránek dost stouply. Docela by mne zajímalo, kolik práce by představoval návrh tabulkového layoutu (s co nejmenším využitím CSS) např. s těmito parametry: 3 sloupce, levý sloupec s pevnou šířkou a v kódu až na konci, prostřední s plovoucí šířkou a délkou řádku pokud možno nepřesahující 70 znaků při základní velikosti písma, pravý s plovoucí šířkou přibližně poloviční oproti prostřednímu. To vše tak, aby to nerozhodila změna velikosti písma, změna velikosti okna a různé velikosti vložených obrázků.

Avatar

Autor komentáře: PePPer

Datum vložení: 15.1.2004 9:39:23

Myslim ze byste se velice ohradil kdyby se nekdo snazil pomoci css layoutu napodobovat tabulkovy layout. Pak ale neni duvod pomoci tabulek napodobovat to co se dela pomoci css.

Tabulkovy layout se dela vetsinou s pevnymi rozmery a v css muzete delat vsechny ty plovouci sirky i ostatni.

Kazdy se hodi na neco jineho. Trochu smutne musim dodat ze my stale jeste pouzivame tabulkovy layout u svych webu ikdyz ja uz bych pred rokem se snazil layout predelat do css. Bohuzel jsem zatim nenasel podporu. Podminkou totiz je, aby to vypadalo v nejpouzivanejsich prohlizecich stejne.

Avatar

Autor komentáře: Vilém Málek

Datum vložení: 15.1.2004 9:51:31

<I>Podminkou totiz je, aby to vypadalo v nejpouzivanejsich prohlizecich stejne.</I>

To už ale dnes není problém (viz Interval.cz), jde jen o to, nakolik bude podmínkou také zachování původního tabulkového vzhledu ;-)

Avatar

Autor komentáře: Jan Brasna

Datum vložení: 9.1.2004 19:55:34

A muzu se kolego zeptat, kolik webu mesicne delate a v jakem velkem studiu pracujete, ze mate takovy prehled? Jo, driv bylo css "hrackou" semantiku a programatoru, ale kdyz i webdesigneri/grafici cichli k css layoutu, tak zjistili, ze se jim vlastne layout webu udela lip, bez rezani do kostek, jen napozicovanim objektu. Dnes uz to pouzivaji i zname webdesignerske spolecnosti jako symbio (telecom, tmobile, crocodile), etnetera (seznam, eurotel), 1studio, peckadesign, webface a dalsi...

Avatar

Autor komentáře: Yuhů

Datum vložení: 10.1.2004 0:47:40

Resp. kdo je prosím Etnetera a co dělá pro Seznam? Díky.

Avatar

Autor komentáře: Jan Brasna

Datum vložení: 11.1.2004 0:10:02

<a href='http://www.etnetera.cz' target='_blank'>http://www.etnetera.cz</a> , byli nejakou dobu podepsani pod seznamem

Avatar

Autor komentáře: Yuhů

Datum vložení: 13.1.2004 19:15:04

To bude nějaký omyl. Jsem po dva roky členem týmu, který designuje stránky Seznamu (jeden čas jsem ho vedl), ale studio Etnetera opravdu neznám.

Ale mohu potvrdit všechno, co píše Marek. Když jsem v Seznamu začal, bylo všechno v tabulkách. Co se od té doby předělávalo, se dělalo ve stylech a je to lepší, lacinější, rychlejší a zábavnější.

Avatar

Autor komentáře: Vilém Málek

Datum vložení: 13.1.2004 19:40:21

Co se týče těch tabulek a CSS layoutu, klidně vše potvrdím. Na Intervalu je to festovně znát, ty mizerné tabulky nám dávaly pořádně zabrat ;-)

Avatar

Autor komentáře: Jaro

Datum vložení: 9.1.2004 12:43:43

Nemozem si odpustit reakciu na prispevky typu "css je na prd". Za vsetkymi typmi prehliadacov a ich jednotlivymi verziami je treba vidiet predovsetkym pracu programatorov, ktori zrejme maju dovod implementovat resp. implementovat po svojom mnohe funckie CSS. Keby existovali idealne prehliadace s idealnymi standardmi , zrejme by sa programovanie webov stalo zalezitostou sekretariek na uradoch. Preto povazujem vyjadrenia typu "CSS je na prd..." atd. skor za neschopnost alebo lenivost sledovat novinky a poznatky. Nie vsetke programovanie www je len kreativnou cinnostou, casto treba vykonavat aj "spinavu pracu'
K samotnemu clanku o Implementacnych chybach niet co dodat, dozvedel som sa niekolko zaujimavych veci.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 9.1.2004 12:51:29

V zásadě souhlasím. A prosím všechny čtenáře, aby se nadále zdrželi mimotématických příspěvků typu k čemu CSS, XHTML je na nic apod... Zato uvítám náměty na CSS triky a další způsoby řešení chyb, které vhodně doplní článek.

Avatar

Autor komentáře: Civilkář

Datum vložení: 9.1.2004 13:29:43

Dobrý den,

mám sice mlhavý dojem, že tady na Intervalu už cosi podobného vyšlo, ale v rámci Vámi proklamovaného seriálu článků bych uvítal článek týkající se podpory různých způsobů přiřazování stylů v prohlížečích - tedy at rules + atributy MEDIA, elementy LINK apod.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 9.1.2004 13:35:54

Ovšem to jjiž není věcí implementačních chyb, ale úrovně implementace toho kterého řešení. Článek by tedy možný byl (pokud takový v češtině neexistuje), ale myslím, že se nehodí do seriálu.

Avatar

Autor komentáře: Martin Hassman

Datum vložení: 9.1.2004 13:37:24

Ano, popisy riznych variant @import a jejich jsem v obou :-) ceskych knihach o CSS marne hledal. Marek Prokop sice zminoval jejich pouzivi v souvislosti s odriznutim tech kterych prohlizecu, ale jiz tam nemel opacny pristup: prehled jednotlivych @import a u kazde popis prohlizecu a jejich verzi, ve kterych funguje. Ani u Pixyho jsem nepochodil. Skoro si pripadam, ze je to malo probadane tema.

Avatar

Autor komentáře: Michal Kubeček

Datum vložení: 9.1.2004 20:49:33

V článku je použita doctype deklarace s identifikátorem "-//W3C//DTD HTML 4.0 Strict//EN", což je poměrně častá chyba. Správný identifikátor pro HTML 4.0 Strict je "-//W3C//DTD HTML 4.0//EN".

Avatar

Autor komentáře: miroslav.kucera

Datum vložení: 9.1.2004 22:42:27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"<a href='http://www.w3.org/TR/REC-html40/strict.dtd">' target='_blank'>http://www.w3.org/TR/REC-html40/strict.dtd"></a>

Avatar

Autor komentáře: Martin Kupec

Datum vložení: 11.1.2004 9:47:06

Někde jsem vyzkoušel použití <B>!Imortmant</B> a myslím, že to fungovalo.
Takové články jsou výborné, protože případné nepřesnosti a absence něčeho doplní následná diskuze.

Avatar

Autor komentáře: Martin Kupec

Datum vložení: 11.1.2004 9:49:48

Pardon - <B>!Important</B>

Avatar

Autor komentáře: Jan Bien

Datum vložení: 12.1.2004 9:29:14

Vy myslíte asi toto:

#sample {
width: 150px !important;
width: 210px;
}

Moderní prohlížeče znají !important a platí pro ně řádek 1. V IE 5+ (včetně šestky) !important neznají, platí pro ně tedy druhý řádek. V tomto případě by bylo potřeba, aby IE6 běžel v quirku. Nevýhodou je, že hackujeme i šestku a kdo ví, jak to bude v sedmiíčce. Lepší řešení by proto bylo:

#sample {
width: 150px !important;
width: 210px;
width/**/:/**/150px;
}

Pak by IE6 musel běžet ve standardním režimu. Výhodou ale je, že se nemusíme bát budoucí verze, protože se obchází jenom pětka, která ignoruje třetí řádek. Šestka třetí řádek akceptuje.

Avatar

Autor komentáře: Jan Brasna

Datum vložení: 12.1.2004 17:11:41

Jane, muzete trosku rozvest onen "!important hack" ? Ja pouzivam !important ve stylopisech bezne pro zdurazneni zapisu pri kaskadovani, kdyz definuji duraz u nejakeho obecnejsiho zapisu (s mensi prioritou), ktery ma prebit nejaky konkretnejsi (vetsi priorita), a v IE5+ funguje normalne.

Avatar

Autor komentáře: Jan Bien

Datum vložení: 12.1.2004 21:21:35

Já se vyjádřil nepřesně. Vaše použití !important jak ho používáte je samozřejmě OK. Pokud vím (nemám možnost to nyní ověřit), tak funguje spolehlivě až od IE 5.5. Ale zpět k tomu hacku:

#sample {
width: 150px !important;
width: 210px;
width/**/:/**/150px;
}

Prohlížeč s plnou podporou příslušných CSS vlastností (Opera, Mozilla, Safari) definuje šířku na prvním řádku s !important. Druhý řádek vlastnost nepřebije a třetí (normálně funkční) také ne. Výsledná hodnota je 150px.
IE5.x v tomto případě na druhém řádku přebije hodnotu z prvního, ač je definována jako !important. Třetí řádek nezná, ač je OK - je to hack. Pro IE5.5 se tedy nastavuje hodnota 210px.
IE6 na druhém řádku přebije hodnotu z prvního, protože stejně jako IE5.5 !important v sadě pravidel ignoruje. Kvůli němu je tam třetí řádek, který již šestka interpretuje OK a nastaví hodnotu na 150px.

Avatar

Autor komentáře: Pavel Ptáček

Datum vložení: 20.3.2004 22:54:39

Prosím odpovězte mi na e-mail.

Nešlo by to udělat elegantněji, a takto:

#sample {
width: 210px;
width/**/:/**/150px !important;
}

? Jde mi o to, že pro IE 5.x a nižší se nestaví 210px; protože v tomto případě druhý řádek nezná.
IE 6 nastaví první řádek, ale v zápětí ho přebije hodnotou 150px, protože tento zápois IE 6 zná, a i když ignoruje hodnotu IMPORTANT tak původní hodnotu 210 přebije na 150 (je totiž druhá)
Ostatní prohlížeče přečtou druhý řádek a neignorují ono !important, takže také nastaví 150px;

Tenhle způsob je jenom hezčí nic víc, nic míň. Nicméně, nerozumím tomu, a tak by mě zajímalo jestli zde mám pravdu. Děkuji.

Avatar

Autor komentáře: Pavel Ptáček

Datum vložení: 25.3.2004 14:18:17

Promiňte, jsem úplně tupej :)

Avatar

Autor komentáře: TimJ

Datum vložení: 11.1.2004 17:48:58

ještě na BOX model funguje celkem spolehlivě tohle:
border: 20px;
padding: 5px;
width: 150px; /* pro IE */
max-width: 200px; /* IE nezná a ignoruje, ostatní browsery ignorují 150px uvedených výše */

občas to používám, otázka je, co to dělá v jinejch prohlížečích než je Opera 7, Mozilla 1.3a a IE6

Avatar

Autor komentáře: Marek Prokop

Datum vložení: 11.1.2004 19:02:52

Správně vypočítaná šířka v uvedeném příkladu činí 150px, takže to by asi nefungovalo. On ten příklad ale stejně nedává smysl, když pro IE určuje menší šířku naž pro ostatní prohlížeče. Nejde o nějaký překlep?

Avatar

Autor komentáře: Michal Kec (MiK)

Datum vložení: 12.1.2004 16:19:14

Dobrý článek, začátek pefrektního seriálu, jak doufám. :-) Díky za něj, ucelený pohled na věc se hodí vždycky!

Avatar

Autor komentáře: Jan Bien

Datum vložení: 12.1.2004 21:25:29

Bookmarklet pro zjištění režimu

Ještě bych měl jednu užitečnou "fíčůrku". Bookmarklet, který vypíše, v jakém režimu pracuje prohlížeč:
javascript:(function(){var mode=document.compatMode,m;if(mode){if(mode=='BackCompat')m='Quirks';else if(mode=='CSS1Compat')m='Standards Compliance';else m='';alert('The document is being rendered in '+m+' Mode.');}})();
Laskavě si přidejte mezi oblíbené.

Avatar

Autor komentáře: Martin Hassman

Datum vložení: 13.1.2004 9:56:19

Jen dodam, ze v Mozille staci pro ziskani teto infromace CTRL+I (je obsazena ve vlastnostech stranky), ale je pravda, ze v IE jsem jinou moznost zjisteni aktualniho modu nez pouziti JS nenasel.

Avatar

Autor komentáře: Vlado

Datum vložení: 14.2.2005 8:52:30

Spominate v clanku chybu v IE5.0 co sa tyka vypoctu margin vo vertikalnom smere. Mozete uviest jej osetrenie? Vdaka <html> <head> <title>TestBox 2</title> <style type="text/css"> #sample { margin : 15px; width : 210px; } #sample .in1 { border : 10px solid black; background-color : #DADADA; } #sample .in2 { margin : 20px; } </style> </head> <body> <div id="sample"> <div class="in1"> <div class="in2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. </div> </div> </div> </body> </html>

Avatar

Autor komentáře: JC

Datum vložení: 19.2.2007 11:31:03

Zdravím. četl jsem váš článek. Nevím, jestli se to týká mého případu. Mám problém se zobrazováním web. stránky IE6.0 a firefox 2.0 ji zobrazují Ok. IE7 a Opera 9.02 mi z nějakého neznámého důvodu posouvají logo nahoru. Můžete mi prosím poradit, kde je chyba. http://www.vltava2000.cz/veselyhribecek/ Už jsem pročetl , kdfe co. Psal jsem i administratorovi webu, ale nic se neděje. Předem děkuji za odpověď. R. Boháč

Zpět na článek | Úvodní stránka Interval.cz