Náhrada za clear both

Reaguji na gzkcvza:
Nastavit pro <ul> stoprocentní šířku a buď overflow: hidden, nebo float: left.

Chamurappi:
„Nastavit pro <ul> stoprocentní šířku“
A tu šířku proč?

100% šířku doporučuju vůbec nepoužívat, skoro nikde, vyjímkou jsou pozicované elementy, ale i tak je lepší se tomu vyhnout, protože pak stačí přidat padding a element má víc jak 100 % na šířku. Dá se pro "nápravu" sice použít box-sizing, ale neumí ho IE7.

joe:
„ale neumí ho IE7“
to je neštěstí teda a taky už tu dlouho nebyla zmínka o IE 6 $:D

Kcko:
A proč používat něco, když mi to něco (převážně) v ničem nepomůže, musim toho napsat víc a ještě budu kazit web někomu, kdo třeba ten starší prohlížeč pořád ještě má?

joe:
Tj taky určitě na dálnici nevyblikáváš starý felicie vid :-). Nebudu s tebou debatovat o tom, proč používat / nepoužívat "staré nové" věci, nebo nedejbože něco z CSS3.

Každý nechť si používá a zamrzává tam kde chce. Pro mě je IE 6/7 mrtvá a IE 8 s CSS3 degradací.

Kcko:
Já CSS3 věci používám, ale zatím jsi mi nenapsal jediný argument, proč bych tedy měl používat box-sizing, namísto toho, aby si prohlížeč šířku sám vypočítal a já v klidu mohl použít padding a nemusel se bát, že mi to někde přeteče.

Kromě toho jsou pro tebe IE 6/7 a částečně i 8 mrtvé, ale chceš používat jejich vykreslovací modely. Trochu paradox :-)

joe:
abys nemusel jak trubka počítat s content-boxem, pak budeš potřebovat, upravit padding, border, šířku, víc věcí, a měníš to vše. Nesmysl. Navíc nechápu proč píšeš o přetečení? Kvůli tomu se snad box-sizing: border-box používá ne? Abys u toho nemusel tolik přemýšlet a neustále něco přepočítavat, je to otravné, nudné a zbytečné.

Nic dalšího Ti k tomu psát nebudu, můžeš si to přečíst např. od Paula Irishe, Chrise Coyiera či jiných uznavaných kapacit ... Pokud je neznáš nebo nečteš přední blogy a servery tak se tu bavíme o ničem.

Kcko:
Asi jsi nepochopil, proč jsem to psal...

Pokud mám div a nenastavím mu šířku, roztahuje se automaticky a můžu mu přidat padding, margin i border a žádný problém nevznikne.

Pokud mu nastavím šířku na 100 %, pak si akorát koleduju o problémy - například při responsivní verzi webu. Snadno se tak může stát, že přidáš padding elementu, který má nastavenou právě šířku 100 % a přeteče ti, tzn. budeš mít na mobilu horizontální posuvník. Nechápu teda, proč bych podle tebe (soudím podle toho, protože jsi na to narážel), měl řešit nějaký způsob počítání, když to vůbec řešit nemusím.

„můžeš si to přečíst např. od Paula Irishe, Chrise Coyiera či jiných uznavaných kapacit ... Pokud je neznáš nebo nečteš přední blogy a servery tak se tu bavíme o ničem.“
Proč bych si to měl přečíst od někoho jiného? Mám vlastní rozum a nejsem líný si to vyzkoušet.

Tak v případě, že se ignorují prohlížeče, co neumí přepnutí režimu pomocí box-sizingu, tak mi také přijde lepší používat okrajový box-model než používat všelijaké obaly, dopočítávat a přepočítávat rozměry a používat méně schopný obsahový box-model (něco v něm vůbec udělat nejde).

Dalo by se sice ve starších IE použít quirk, ale to zase přinese jiné problémy (hlavně třeba při používání cizích hotových JS).

Závěr je tedy jednoduchý:

1) Kašleme-li na starší IE, používáme box-sizing: border-box a nějaké nastavování šířky nás nemusí trápit.
2) Optimalisujeme-li pro starší IE, používáme content-box a nastavování šířky se snažíme za každou cenu vyhýbat.

Reaguji na joa:
„A tu šířku proč?“
Protože to tak řekl JirkaC před šesti lety a já mu na to skočil. Vzpomínám si, že jsem byl tenkrát dost udiven tím, že W3C napůl standardizovalo hasLayout (protože to, že overflow clearoval, byla chyba Exploreru 6) … a navíc jsem neměl plavání rád, proto mě nenapadlo si to vyzkoušet ve všech prohlížečích. Děkuji za vysvobození z tohoto bludu! JirkoviC už nevěřím (a jak tak koukám, neměl jsem mu slepě důvěřovat ani tehdy).

„protože pak stačí přidat padding a element má víc jak 100 % na šířku“
Ano, to může být nepříjemné. Ale i s přetečením se dá žít, pokud ho třeba rodič kompenzuje, byť je to trochu krkolomnější.

„ale neumí ho IE7“
Tímhle jsi zjevně probudil hypermoderního trolla, který se krmí pouze těmi nejpřednějšími kapacitami :-)

Chamurappi:
„Tímhle jsi zjevně probudil hypermoderního trolla, který se krmí pouze těmi nejpřednějšími kapacitami :-)“

v závěsu s nespícím "browserovým zamrzlíkem & upřednostnovačem" :-)

Kcko:
Mám pocit, že diskuse skončila, protože jsi nenapsal ani jeden argument, který by stál za to, abychom se někam dobrali. Nevíš, které techniky používám, ale na základě pár vět soudíš, že jsem ze staré školy. Používám to, co mi usnadní práci a zdá se mi to logické. Nepotřebuju mít úplně vymazlený web jenom na jádru Blink/WebKit a v ostatních prohlížečích ho mít rozpadlý. Důležité je umět používat a myslet v CSS, ne jen slepě používat všechny nejnovější možné CSS3 zápisy, které mi akorát zhorší použitelnost webu.

Chamurappi:
„Ale i s přetečením se dá žít, pokud ho třeba rodič kompenzuje, byť je to trochu krkolomnější.“
¨Pokud nějaký rodič je :-) Lámal bych ruce za to, když se ke mně dostane mobilní verze webu (responsivní) a všude je místo auto psáno 100%.

„Tímhle jsi zjevně probudil hypermoderního trolla“
Zdá se. :-) :-)

Str4wberry:
OT: Proč píšeš "s" i tam, kde by běžný smrtelník čekal "z"?

joe
Jasně jsem Ti napsal, at i to přečteš od css kapacit, popsali to již předemnou a lépe. Nevím proč bych Ti to měl znovu interpretovat.
Asi ze staré školy jsi, nebo jsi zamzrl v čase pokud se i v dnešní době zajímáš o IE 7.

Jedinou omlouvou by bylo, že děláš nějaký intranet do středně velké firmy, kde si zaměstnanci jedou na X let starých PC IE 6 / IE 7 s nemožností updatovat (i to jsem zažil). Nicméně to jsi neuvedl, takže to beru opačně.

„Nepotřebuju mít úplně vymazlený web jenom na jádru Blink/WebKit a v ostatních prohlížečích ho mít rozpadlý. Důležité je umět používat a myslet v CSS, ne jen slepě používat všechny nejnovější možné CSS3 zápisy, které mi akorát zhorší použitelnost webu.“
jj jasně, clearfixem ho zcela rozpadneš (např. existuje knihovna selectivzr, která Ti umožní pro CSS zapnout většinu pokročilých selektorů) - argument? Někdo má vyplý JS? Jistě :) kvůli jednomu člověku se starým IE a vyplým JS nebudu v noci spát ;-)

Znám Tě z diskuse až moc dobře, aby mě tvoje příspěvky nechaly zcela chladným, kór když občas řešíš do morku kostí jádro pudla :-)

Myslím, že už to skutečně můžeme ukončit.

Hezký den >:]

Kcko, Kcko:
Opravdu by mě zajímalo, jakou souvislost mají zde mou pokládané dotazy s tím, jaké technologie já používám?

Kromě toho neustále píšeš o něčem jiném.

„např. existuje knihovna selectivzr“
Ano, tahat ultra cool knihovny na jednoduché věci, které jdou řešit elegantně, by ti šlo. Pak se nesmíme divit, že dnešní prohlížeče nezvládají vykreslovat stránky a trhají se. Osobně kladu důraz na použitelnost webu, jednoduchost a celkově i efektivnost kódu. Tvůj web mě však přesvědčil, s kým mám tu čest :-) Takže také přeji hezký den a tady se s tebou loučím.

Kcko:
Skúsil som si pozrieť tvoju stránku (z profilu). V niektorých prehliadačoch sa stránka zobrazí normálne, v niektorých brzdí zobrazenie čiastočne načítaného obsahu nejaký animovaný obrázok. Vo Firefoxe s vypnutým JS sa zobrazí len tá animácia a nikdy neprestane. Skúšal som otvoriť do nových kariet na pozadí nejaké odkazy zo sekcie „Reference“, no otvorila sa mi tá istá stránka, no bez CSS štýlov - čo je dosť zvláštne, keďže sa vraj „špecializuješ na SEO“ a túto stránku potom indexujú vyhľadávače. Ktoré „CSS kapacity“ ti to poradili? Hlavne, že tam sú tie „nové“ a „moderné“ veci.

„Pro mě je IE 6/7 mrtvá“
Prečo tam máš potom podmienené komentáre pre IE7?

Kcko, joe, _es:

Přátelé, řekl bych, že se čím dál více odchylujete od tématu vlákna. Zabrzděte, ju? :)

Zamykám. Příště budu žblepty podobné příspěvku [#5] mazat.