Autor Zpráva
Nox
Profil
Moderátor Chamurappi: Vytrženo z Clearování – bug, chybná implementace?

pro clearování můžeš použít toto: http://nicolasgallagher.com/micro-clearfix-hack/ na obalující prvek
Chamurappi
Profil
Reaguji na Noxe:
pro clearování můžeš použít toto
To je ošklivá spatlanina. Hodí se ji znát, jen pokud člověk nemůže upravovat HTML.
Nox
Profil
Chamurappi:
Člověk tvého ražení určitě dokáže být specifičtější než "spatlanina" ;)
Chamurappi
Profil
Reaguji na Noxe:
Dokážeš odhadnout, jak bude ta spatlanina fungovat v prohlížeči, který zná float, ale nezná hasLayout a navíc nezná buď display: table, nebo :after?
Nox
Profil
Hádám že podobně jako s (pro sichr "většinou") ostatních neznámých pravidel/hodnot - prostě to akorát nevyclearuje

Půjde imho o nějaké superexotické nebo prehistorické prohlížeče - když udělám průnik s haslayout a display:table a :after (podle caniuse) vychází mi 100% ... to je celkem hodně
Chamurappi
Profil
Reaguji na Noxe:
Půjde imho o nějaké superexotické nebo prehistorické prohlížeče
Ty si snad nezaslouží vyclearování?

vychází mi 100%
Po zaokrouhlení asi ano.

to je celkem hodně
Méně než s obyčejným clearováním. Jaké má obyčejné clearování nevýhody?
Konstrukce s hacky jsou méně odolné vůči neodborným zásahům. Pokud někdo půlku stylů odmaže, způsobí nekompatibilitu, které si nemusí všimnout.
Nox
Profil
Chamurappi:
Ty si snad nezaslouží vyclearování?
To už je celkem věc názoru, dávat čas svůj a případně čas svého klienta a jeho peníze na pokrytí 0.001% prohlížečů místo investování do zbylých 99.999% je podle mě zbytečné až nezodpovědné ... leda ve volném čase pokud je člověk hračička a baví ho to

Méně než s obyčejným clearováním. Jaké má obyčejné clearování nevýhody?
Pokud myslíš tady to zmíněné, tak nemusí se lézt do HTML a plevelit ho nesmyslnými elementy, především při použití preprocesorů to jde komplet přes CSS, jak to má být

Konstrukce s hacky jsou méně odolné vůči neodborným zásahům. Pokud někdo půlku stylů odmaže, způsobí nekompatibilitu, které si nemusí všimnout.
Když už toto chce člověk řešit, dá se prostě komentář, že se do dané části souboru nemá zasahovat. Při @include-ch stanovit, že ty s prefixem třeba "system" se nemají mazat, nebo jen opatrně.
Pokud si to i pak někdo sám rozbije, s tím už nic člověk nenadělá - on(a) kód má komplet k dispozici, zamknout ho nebo jen části nejde.
panther
Profil
Nox:
zrovna u tebe mě tento názor/postoj docela zaráží.

tak nemusí se lézt do HTML a plevelit ho nesmyslnými elementy
myslíš, že jeden čistič je nesmyslný? Nemyslím si, je to standardní konstrukce. Do HTML se pravidelně lézt nebude, jen jednou a nikdy víckrát. Stejně jako do CSS, bavíme-li se o konkrétním jednom vyčištění.

dávat čas svůj a případně čas svého klienta a jeho peníze
myslíš tu minutu, během které otevřu šablonu a napíšu cca 10-15 znaků?
Nox
Profil
Asi stárnu ;)

Myslel jsem tím, že ten element nemá žádný faktický význam, není to odkaz, navigace, zdroj něčeho ... je tam jen kvůli prezentační části jako zaplátování problému s CSS, což v HTML nemá být ... přijde mi to jako splatlanina/hack podobným způsobem, jako onen clearfix, akorát
- má podporu blíže 100 % než ten můj odkazovaný
- zato je ale ve vrstvě, kde nemá co dělat
- a je decentralizovaně, tzn. při globální změně musím opět projít všechny šablony a měnit to

myslíš tu minutu, během které otevřu šablonu a napíšu cca 10-15 znaků?
ono se to posčítá, různé podobné věci ;)
panther
Profil
Nox:
má podporu blíže 100 % než ten můj odkazovaný
myslíš přesně 100%, že?

zato je ale ve vrstvě, kde nemá co dělat
nechce se mi kód v [#1] zkoumat (je tam strašně moc balastu, mnohem více, než kdyby se to vyřešilo „normálně“), ale clearovat se dá i s pomocí již existujících elementů.

tzn. při globální změně musím opět projít všechny šablony a měnit to
pokud jsou šablony napsané nějak rozumně, globální změny budou v jedné šabloně, která bude společná všem stránkám/většině stránek. Změnu tedy provedu na jednom místě.


Jestli se k tomu chceš ještě vyjádřit, máš poslední reakci, na kterou v tomto tématu dále již odpovídat nebudu - není předmětem dotazu. Navrhl jsi nějaké řešení, které tazatel klidně použít může, bude-li chtít.
Chamurappi
Profil
Reaguji na Noxe:
dávat čas svůj a případně čas svého klienta a jeho peníze na pokrytí 0.001% prohlížečů místo investování do zbylých 99.999% je podle mě zbytečné až nezodpovědné
Ale clearfixem těch 99.999 % nic nezíská a práce je s ním skoro stejná.

nemusí se lézt do HTML a plevelit ho nesmyslnými elementy
Musíš přidat třídu. Třída má popisovat obsah. Prezentační třída plevelí HTML stejně jako prezentační element, akorát na jiné úrovni. Proč si myslíš, že je to lepší?

to jde komplet přes CSS, jak to má být
Zneužitím vlastnosti content k něčemu, k čemu není určená. Stejně tak display: table je určené k něčemu jinému než ke clearování.
Nox
Profil
panther:
Chápu

Pokud je ok uvažovat, že ne všichni podporují after, display table a/nebo hasLayout, je taky ok uvažovat, že nepodporují něco z ostatních vlastností
Box s floatujícími prvky může být přece v jakékoli sekci

Chamurappi:
Myslel jsem to obecně, radši se budu zaměřovat na browsery používané 99% uživateli a případně budoucími verzemi, než podporovat ty, které používá 5 lidí a často mají garanci ještě dalšího snižování (u starých). Tudíž místo řešení zobrazení např. v IE4 ten čas radši dám na další vylepšení použitelnosti pro zbývajících 99%

Musíš přidat třídu.
Pokud používáš preprocesor a víš, že blok slouží k uchování floatujících prvků, dáš @include clearfix - ani to nemusí být všude, můžeš si udělat prvek, který bude obecněji řešit blok s floatujícími prvky.

A i pokud bychom dávali všude třídu, bude to aspoň zapouzdřeno do CSS; br, hr atd. mají bez CSS i svůj vlastní význam. Takže pokud vyměním styly (třeba tisk), nebudu tam mít nečekanou mezeru nebo čáru.

Zneužitím vlastnosti content k něčemu, k čemu není určená. Stejně tak display: table je určené k něčemu jinému než ke clearování.
V CSS je to sice také zneužití, ale aspoň je to ve správné vrstvě; ne zneužití a ještě jinde, než má být
shaggy
Profil
Dovolím sa aj ja zapojiť do tejto diskusie.

Nox:
V CSS je to sice také zneužití, ale aspoň je to ve správné vrstvě
Som nevedel, že existuje správna a nesprávna vrstva na zneužitie. Vedel by si mi prosím dať jeden argument, prečo je to lepšie v CSS, ako v HTML (naozaj ma to zaujíma)?

Pokud používáš preprocesor
Čiže namiesto jednoduchej úpravy HTML sa musím hrať ešte s preprocesorom a neviem čím iným? Nezaberie to viac času?

A i pokud bychom dávali všude třídu, bude to aspoň zapouzdřeno do CSS; br, hr atd. mají bez CSS i svůj vlastní význam. Takže pokud vyměním styly (třeba tisk), nebudu tam mít nečekanou mezeru nebo čáru.
HTML je rovnako náchylné na zmenu, ako CSS. Ak to bude HR a zmením štýly, tak sa mi na stránke objaví čiara, ktorú si na 99% všimnem a môžem to odstrániť. Ak to urobím tvojim spôsobom, tak po zmene štýlov sa mi nič nezobrazí a ani stránka nemusí byť v tej chvíli rozbitá. Preto si to nevšimnem a neopravím to.

Myslel jsem to obecně, radši se budu zaměřovat na browsery používané 99% uživateli
"Klasický čistič" tiež funguje v browseroch, ktoré používa 99% používateľov (dokonca viac).
Chamurappi
Profil
(Klidně pokračujme, vyčlením nás…)

Reaguji na Noxe:
Myslel jsem to obecně
Není důvod zobecňovat. Samozřejmě, že důležitější jsou rozšířené prohlížeče. Tohle není buď a nebo.

Pokud používáš preprocesor a víš, že blok slouží k uchování floatujících prvků, dáš @include clearfix
Pokud používám jiný preprocesor, můžu stejným způsobem snadno dosadit clearovací element. Na každý složitý výrobní postup jde vymyslet optimalizace. Pak už se ale nebavíme o konkrétních postupech, nýbrž o vývojářských nástrojích, kterým jen dáš pokyn „chci hodinky s vodotryskem“ a konkrétní technické řešení vodotrysku už je vedlejší.

pokud bychom dávali všude třídu, bude to aspoň zapouzdřeno do CSS
Proč je to lepší? Protože se můžeš kdykoliv svobodně rozhodnout, že všechny clearfixy přestanou clearfixovat a začnou místo toho třeba zobrazovat na pozadí čokoládové dorty? Nereálné, clearfix zůstane navždy clearfixem a tam, kde ho budeš chtít použít, přidáš prezentační třídu do HTML. Ze zapouzdření do CSS nekouká žádná praktická výhoda.

br, hr atd. mají bez CSS i svůj vlastní význam
Pokud na tom záleží, stačí použít <span>.

V CSS je to sice také zneužití, ale aspoň je to ve správné vrstvě
Sémantika v HTML není cílem, ale prostředkem. Je důležitá prakticky jen proto, aby se kodér v díle vyznal. Clearovací element není matoucí a s HTML se moc často nešachuje, zatímco tři deklarace s contentem, s :after a s display: table uvnitř častěji upravovaného CSS vyžadují vysvětlení.
Nox
Profil
shaggy:
Jako vrstvu jsem myslel CSS (vizuální stránka) vs HTML (struktura).
Floatování je záležitost CSS a vizualizace, clearování je jen fixnutí problému s touto vizuální stránkou, takže myslim že by to mělo být ve stejné části

Ak to bude HR a zmením štýly, tak sa mi na stránke objaví čiara
to je zajímavý nápad, pravda...

"Klasický čistič" tiež funguje v browseroch, ktoré používa 99% používateľov (dokonca viac).
Ale je s ním o drobek víc práce...

Chamurappi:
vyčlenění ok, omlouvám se za odklonění tématu

Není důvod zobecňovat. Samozřejmě, že důležitější jsou rozšířené prohlížeče. Tohle není buď a nebo.
Pokud jde o dělení času, priority atd., tak mi přijde, že celkem ano...

Pokud používám jiný preprocesor, můžu stejným způsobem snadno dosadit clearovací element. Na každý složitý výrobní postup jde vymyslet optimalizace. Pak už se ale nebavíme o konkrétních postupech, nýbrž o vývojářských nástrojích, kterým jen dáš pokyn ‚chci hodinky s vodotryskem‘ a konkrétní technické řešení vodotrysku už je vedlejší.
Máš pravdu, uznávám ... momentálně akorát nevím o nástroji, co by dokázal alespoň částečně centralizovaně řešit clearovací elementy napříč projektem v blocích s float elementy

Proč je to lepší?
Může se stát - viz příklad s tiskovými styly.

Pokud na tom záleží, stačí použít <span>.
Beru, ok

Sémantika v HTML není cílem, ale prostředkem. Je důležitá prakticky jen proto, aby se kodér v díle vyznal. Clearovací element není matoucí a s HTML se moc často nešachuje, zatímco tři deklarace s contentem, s :after a s display: table uvnitř častěji upravovaného CSS vyžadují vysvětlení.
pokud se změní nazev z ".cf" na ".clearfix", tak vysvětlení snad není potřeba a i ikdyby, to spraví globálně jeden komentář


Používal jsem zatím oba způsoby, ty čistě třídové/CSS byly prostě (pro mě) mnohem pohodlnější pro práci a zároveň jsem nikdy nezaznamenal žádný problém

Tím třetím myslím ještě http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ - je toto víc ok? Není tam display table, akorát stále :after a hasLayout, sice se přidává tečka, ale pokud funguje after a content, myslím že se dá čekat, že bude fungovat i její skrytí.
Ugo
Profil
Nox:
vysvětli to i nezasvěcenému, kolik práce mi dá napsat např. můj <div class="mr_propper"></div> př. kratší tag.
Funkčnost : vysoká
Práce : nulová
Srozumitelnost : Absolutní (při jinym pojmenování :) )

Tak proč hledat jiný řešení, i kdyby bylo o vteřinu na 1 clear lepší. Navíc selekce :before a :after zdaleka nejsou dobře podporovány, je to jako třeba last-child, protě nepoužitelný.

Když potřebuju u jednoho elementu ten clear zrušit, tak do html budu muset všude abych odebral tu třidu ne?
Medvídek
Profil
Ugo:
Já tedy souhlasím s Noxem. Pro mě je jednodušší nadřazenému prvku přidat třídu cleaner, než cpát pod plaváčky prázdné tagy s clearem, který tam jsou jen kvůli plovoucím prvkům.

Používám toto a zatim sem se nesetkal s nějakým větším problémem.
.cleaner {display:inline-block;}
.cleaner:after {content: ".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .cleaner {display:block;}
* html .cleaner {height:1%;}
.clear {clear:both;line-height:0;height:0;}
Nox
Profil
Ugo:
Jasné, no ale... máš větší projekt, je tam kvanta šablon, CSS, javasciptů, PHP controllerů a modelů, potřebuješ dělat obrázky, obsah atd. ... v tom velkým kvantu různorodých úkolů je člověk rád za každé ulehčení práce

Co se týče nepodpory :after, :before to vyloženě není pravda - už jsem nepřímo odkazoval na zdroj, kde je vidět, že je napak vysoká - takže link: http://caniuse.com/#search=:after nepodporují akorát stará IE, jinak úplně všechny majoritní i téměř majoritní prohlížeše
Pokud máš jiné informace, tak mi to klidně vyvrať

Tak proč hledat jiný řešení, i kdyby bylo o vteřinu na 1 clear lepší.
... 'BTW, they say laziness is the driving force of the invention If our ancestors weren't lazy we wouldn't have things like "automated mammoth skining machine" nowadays :)' (Chris from BBGZ)

Prostě pro pokrok ... usnadnění práce ...

Když potřebuju u jednoho elementu ten clear zrušit, tak do html budu muset všude abych odebral tu třidu ne?
J, to máš pravdu


Nechci nikoho přesvědčovat, že verze s clearovacím elementem je špatná! Jenom vysvětluji důvody, proč si myslím, že je mikro varianta dobře použitelná a pro mě osobně ulehčením
Ugo
Profil
Nox:
ta tabulka mi sedí a ani já nechci nikoho přesvědčovat, chápu výhody toho dát to na jeden nezbytečnej prvek, bohužel se weby dělaj hodně často ještě pro IE 6, natožpak IE 7 - to je samozřejmost, ani google s tim ještě neseknul. S 6 už snad jo. Prostě dokud bude IE tak pokrok nebude.
Nox
Profil
Náhodou MS se už snaží, IE9&10 jsou už na úrovni s ostatními prohlížeči, v něčem myslim dokonce dál
Chamurappi
Profil
Reaguji na Noxe:
Floatování je záležitost CSS a vizualizace, clearování je jen fixnutí problému s touto vizuální stránkou
Jenže floatování není problém ani chyba, aby se na něj musela hledat více či méně ošklivá záplata. Tenhle přístup mi připadá dost … divný. Velmi často nepřidávám kvůli clearování ani elementy, protože clearovat může něco, co už v kódu je. Přijde mi zvláštní hledat paušální řešení.

Ale je s ním o drobek víc práce...
V čem? S připsáním třídy je méně práce než s připsáním elementu? Nebo s přidáním clear: both tam, kde chci clear: both?

pokud se změní nazev z ".cf" na ".clearfix", tak vysvětlení snad není potřeba
Název může vysvětlovat účel, nikoliv princip fungování. Kodér by měl vědět, co a proč funguje.

sice se přidává tečka, ale pokud funguje after a content, myslím že se dá čekat, že bude fungovat i její skrytí
Její vizuální skrytí. Copak řeknou na tečky hlasové čtečky?
Neroztáhne Opera při zapnutém režimu „Fit to width“ pseudoelement na minimální velikost textu?

:after nepodporují akorát stará IE
Až vymřou staří Explorerové, tvůrci stránek můžou zatoužit po rozumných způsobech využití pseudoelementu :after… a narazí na clearfix — kvůli clearování nebudou moct použít content, protože už bude částečně obsazený.

Prostě pro pokrok ... usnadnění práce ...
Nezpochybnitelný motor vývoje, ovšem neshodneme se, že tohle je opravdu cesta k usnadnění práce.

„Když potřebuju u jednoho elementu ten clear zrušit, tak do html budu muset všude abych odebral tu třidu ne?“
J, to máš pravdu
Bez použití clearfixu se do HTML zasahovat nemusí, stačí kontextovou deklarací nastavit clear: none, nebo zrušit specificky nastavený clear. (Pokud se nepoužije zrovna ten <br clear="all">.)


Reaguji na Uga:
Prostě dokud bude IE tak pokrok nebude.
Explorer byl první prohlížeč, který nějaký druh clearfixu podporoval. Je naopak chybou, že ostatní prohlížeče (částečně) šly jiným směrem.
Nox
Profil
Chamurappi:
Jenže floatování není problém ani chyba, aby se na něj musela hledat více či méně ošklivá záplata. Tenhle přístup mi připadá dost … divný. Velmi často nepřidávám kvůli clearování ani elementy, protože clearovat může něco, co už v kódu je. Přijde mi zvláštní hledat paušální řešení.
Myslel jsem nesprávná (minimálně nezamýšlená) výška elementů obsahujícího floatované elementy jako chybu.
J, o tomto způsobu vím, to je nejhezčí, ale nejde to použít vždy

V čem? S připsáním třídy je méně práce než s připsáním elementu? Nebo s přidáním clear: both tam, kde chci clear: both?
pro mě holt ano :)

Její vizuální skrytí. Copak řeknou na tečky hlasové čtečky?
Neroztáhne Opera při zapnutém režimu „Fit to width“ pseudoelement na minimální velikost textu?
Proto jsem se ptal - díky, j, to asi není ideální...

Až vymřou staří Explorerové, tvůrci stránek můžou zatoužit po rozumných způsobech využití pseudoelementu :after… a narazí na clearfix — kvůli clearování nebudou moct použít content, protože už bude částečně obsazený.
Hmm, pravda :/ ... tenhle argument by mě mohl dost dobře zvyklat, zamyslim se nad tím

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0