Jak na responzivní hlavičku webu

Zkoušel jsi to přes flex?
css-tricks.com/snippets/css/a-guide-to-flexbox

kelvin:
A pokud flex nepoužije jen v responsivní verzi, bude mít hlavičku rozbitou v IE na desktopu.

Libor Nečáska:
přidej nadpisu float: left a jejich rodiči overflow: hidden a zelenou barvu na pozadí (kterou nyní má nadpis).

Tomášeek:
Prečo byt ju mal mať rozbitú? Edge predsa flex podporuje.

pcmanik:
Tak ne všichni uživatelé IE jsou ti, co mají Edge, že? Psal jsem záměrně o IE, nikoliv o Edgi. V různých oborech je zastoupení IE nezanedbatelně malé.

Tomášeek:
IE 10 podporuje predsa flex s prefixom. Oficiálne zo strany Microsoft-u je podporovaný už len IE 11 a aj to len bezpečnostné záplaty... Nerád by som tu znova rozprúdil debatu o podore mizivého percenta ľudí...

Používatelia tých archaických verzií IE sú aj tak zvyknutý na to že majú weby rozhádzané takže to pre nich enbude nič nové.

pcmanik:
Pracuj si s čím chceš a odrazuj ze svého webu lidí, kolik chceš. Lidé používají i oficiálně nepodporované prohlížeče, protože měnit nemohou, nebo nechtějí.

Z praxe ti uvedu příklad, který si asi ani nedovedeš představit.
Máme e-shop, na který nám chodí 3% lidí s IE8 a 4,5% lidí s IE9. To jsou ti bez flexu. Celkem 7,5% lidí, generují skoro 10% obratu toho shopu. Ty takový e-shop nikdy mít nebudeš, protože tyhle lidi vypudíš, aniž bys věděl, o kolik peněz se dobrovolně okrádáš (v horším případě člověka, pro kterého tvoříš).

Pokud je pro tebe v konkrétním případě 7,5%, což je každý dvanáctý! (nebo dokonce 10% obratu) mizivé procento, tak dále není skutečně o čem se bavit. Na tvých webech ta množina bude představovat 0%, ale kolik potenciálních uživatelů by k tobě chtělo, nevíš. Na toto dále odpovídat nemusíš, ať tu nezproudíš debatu, kterou rozproudit nechceš. Nicméně, pokud se doporučuje technologie, která může velké části uživatelů nefungovat, je třeba to zdůraznit.

PS. není důvod, aby tito lidé měli web rozházený. Pokud jsi jej tedy netvořil ty :-)

Tomášeek:
To s tím tvým e-shopem tu už jednou bylo, a nebylo to zrovna před měsícem :-), doba od té doby pokročila, lidé mají nové počítače, ale vaši zákaznici jsou stále ve stejně zastaralém "browser" složení? Zvláštní ...

Kcko:
Tak zrovna tady mi to divné nepřijde. Pokud těch 7,5% bylo naschvál pozadu protože nemohli upgradovat, tak mi nepřijde divné, že na těch verzích pořád zůstávají.

Tady jde o to, že pokud existují dvě řešení a jedno starší má lepší podporu než druhé novější, tak pro použití druhého je podle mě potřeba mnohem vážnější důvod než jen to, že je nové a cool.

Kcko:
Jen jsem zde uvedl reálná čísla při pohledu do statistik. Nejde o globální trend, to ani netvrdím, ale u nás to tak zkrátka je. A věřím, že to tak je i u jiných shopů (nebo webů obecně), kterým je dopřána péče, jsou správně vytvořeny a nikoho nevyhání (přičemž náklad na vytvoření je minimální. I řešení mnou uvedené zde nemá proti flexu žádné nevýhody, jen výhody (délka zápisu, podpora, ...)

Narozdíl od tebe tyto lidi rád obsloužím, protože to pro nás jsou nemalé peníze. Ty, pcmanik a další tyto zavrhnete, aniž byste věděli, jak velká ta skupina je (pohledem do globálních statistik to nezjistíš, stejně jako nezjistíš procentuální zastoupení Škodovky na globálním trhu pohledem na statistiky autotrhu v ČR).

Keeehi to druhým odstavcem vystihl krásně. Použít cool řešení jen kvůli coolovisti, bez dalších důvodů a ignorováním negativ, je minimálně hloupé.

Keeehi:
Mě to divné přijde. Já průběžně měním PC po nějaké době, moji klienti taky.

Kde člověk nemá volbu a musí zůstat u IE pokud nechce jiný prohlížeč, je pouze Win XP. U ostatních může upgradnout snad ne?

Flame neotvírám, ale skutečně nevidím důvod používat staré postupy např. na layout (floatování, které ke stavbě layoutů skutečně není) a nepoužívat nové věci (miniálně ten FLAX, do budoucna GRID), kvůli starým a nepodporovaným verzím IE ...

Schválně jsem si udělal statistiku na svém novém portálu za ty 2 týdny běhu (cca 300 UIP denně) a nic staršího než IE 11 jsem nezaznamenal a to ještě nepříliš četný výskyt (všechno Chrome / Edge) a jestli se objeví pár dinosaurů s dinosauřími prohližeči, tak je mi jich líto, ale nezajímají mě.

Kcko:
„floatování, které ke stavbě layoutů skutečně není“
Heh.

„Schválně jsem si udělal statistiku na svém novém portálu za ty 2 týdny běhu (cca 300 UIP denně) a nic staršího než IE 11 jsem nezaznamenal.“
To myslíš ten Španělský fotbal? Tak tam je mladá cílovka, která mění stroje častěji, aktualizacím rozumí, aktualizovat chce. Z různých důvodů. Každý web cílí na jinou masu lidí.

Ale, a to jsem psal i výše, nevíš, kolik lidí s IE8, IE9 a IE10 vyháníš, protože jim obsah nenaservíruješ. Nic neprodáváš, tak to nemůžeš měřit na konverzích (kterých může být z celku klidně dvojnásobek než návštěv).

Jen mimochodem. Jaké nevýhody má řešení, které jsem přednesl zde tazateli s floatem oproti flexu (prosím vyjmenovat)? A má flex nějaké výhody oproti tomu floatu (prosím vyjmenovat)?

Tomášeek:
Já neřekl, že nic neuvidí. Jen to třeba neuvidí tak pěkné (viz flex, ale hezky pod sebou, jejich problém).

Tomášeek:
Vygoogli si Flex vs float :) a hlavně si jej vyzkoušej, co to všechno umí a jak Ti to ulehčí práci.

Kcko:
„U ostatních může upgradnout snad ne?“
To by byl krásný svět. Ale existují tu školy, nemocnice, korporáty a spousta dalších. Je jedno, co to vlastně je, důležité je to, že ty stroje nejsou těch lidí co je používají. O tyto stroje se stará někdo jiný a oni jsou jen uživatelé. Uživatelé s minimálními právy, kteří nemohou instalovat programy když zrovna chtějí. Některé organizace zamrzly proto, že jim to někdo nastavil a oni nemají teď nikoho, kdo by jim to upgradoval, některé kvůli vnitropodnikové politice, někde jen proto, že jejich "ajťák" na to dlabe. Ať už jsou důvody jakékoli, důsledkem jsou uživatelé kteří se svým porgrmovým vybavením jsou dekádu/y pozadu ale ze své pozice s tím nic nemohou udělat.

„Vygoogli si Flex vs float :“
Tomášeek ale neporovnává obecně flex s floatem. Flex je opravdu mocný a je spousta věcí, co s floatem nevyřešíš a s fexem ano. On se ale ptal na tento konkrétní případ. Jaké jsou právě v tomto případě výhody řešení s použitím flexu? Kromě toho že u práce nemusím přemýšlet a prostě to tam plácnu, protože vím, že to musí zvládnout když zvládne i složitější případy.

Tomášeek:
Ja osobne mám jeden malý cestovateľský portál, od začiatku roku 30 000 unikátnych návštev a z toho malo 174 ľudí IE 9 alebo starší t.j. 0.0058%. A tu cieľovka naozaj nieje len ľudia do 30 rokov.

Osobne nevidím dôvod investovať svoj čas pre tento mizivý počet užívateľov. Flex sa dá vcelku dobre použiť aj s float alebo display: inline-block a teda aspoň aká taká spätná kompatibilita je zaručená.

A prosím nehádajme sa tu už o starých Exploreroch. Ak je zákazník ochotný doplatiť vývoj pre túto zastaralú platformu tak nevidím v tom problém. Inak je to mrhanie programátorským časom sa starať o IE < 11.

Polovička internetu je dnes už "rozbitá" / funguje čiastočne / nefunguje vôbec na starých exploreroch a jedná sa o oveľa väčšie weby ako je tvoj eshop. Ale ak sa vám oplatí investovať prostriedky do podpory staršej verzie IE tak v tom nevidím problém :)

PS: Všimli ste si že tu Chamurappi už dlho nebol? Ten by nám to vytmavil aký sme neschopáci a že nepíšeme weby pre IE6 :D

Tomášeek:
„Ty takový e-shop nikdy mít nebudeš, protože tyhle lidi vypudíš“
Kto povedal že ich vypudím? Nerobím weby ktoré su nepoužiteľné no zároveň sa nestarám ako sa "rozpadnú" (rozumej nerobím pre ne špeciálny design) v týchto prehliadačoch.

Keeehi:
„Ale existují tu školy“
Pekne povedané chodím na výšku a v jedna učebna je vybavená počítačmi s XP (irónia na fakulte informatiky čo?) a vieš čo si pozriem na webe? hmm dokopy nič lebo dokopy nič nefunguje, alebo na mňa skáču hlášky o zastaralom prehliadači ktoré sa nedajú zrušiť. A keď sa týmto smerom hýbe trh - rozumej väčšina webov tak uživatelia si na to zvyknú alebo prejdú na niečo novšie.

Kcko:
O flexu toho vím dost, i kdy jej použít. Ale neodpověděl jsi mi na konkrétní dva dotazy (1. výhoda flexu a 2. nevýhoda floatu) u konkrétního problému, v jehož vlákně jsme.

pcmanik:
„Ja osobne mám jeden malý cestovateľský portál, od začiatku roku 30 000 unikátnych návštev a z toho malo 174 ľudí IE 9 alebo starší t.j. 0.0058%. A tu cieľovka naozaj nieje len ľudia do 30 rokov.“
Není to tím, že tam před půlrokem s IE byli, k obsahu se díky technickému řešení nedostali a dále tam tedy nechodí?

„Flex sa dá vcelku dobre použiť aj s float alebo display: inline-block a teda aspoň aká taká spätná kompatibilita je zaručená.“
Pak je otázka, když tam ten float máš, proč jej duplikovat flexem.

„Inak je to mrhanie programátorským časom sa starať o IE < 11.“
Názor "moderního" programátora. Dáváš svým klientům na rovinu vybrat "bude to stát 2 tisíce navíc, nebo přijdete o 5% tržeb"? Jestli ne, tak zákazník netuší, že na někoho dlabeš, je to jen neprofesionalita schovaná za roušku moderna.

„Ale ak sa vám oplatí investovať prostriedky do podpory staršej verzie IE tak v tom nevidím problém :)“
Bylo to asi tak v řádu (desítek) minut při jeho vývoji. Žádné speciální úpravy na podporu nebyly třeba. Jen jsme si třeba odpustili flex a nahradili jej floatem, který je málo cool.

„Ten by nám to vytmavil aký sme neschopáci a že nepíšeme weby pre IE6 :D“
No, tak IE6 už je trochu extrém, sedmička taky. Ale my ze staré školy bychom se jej asi nebáli, myslím, že by to neměl být problém (jasně, nikdo dnes neřeší známé bugy, double-margin při floatu, apod., ale kodéra, který IE6 zažil, by to nemělo zdržet více než jednotky minut).

„Nerobím weby ktoré su nepoužiteľné no zároveň sa nestarám ako sa "rozpadnú"“
Pokud se rozpadnou, tak nepoužitelné jsou.

Pokud je mi známo, tak tento problém nějaké hezké elegantní řešení nemá.

Vždy se musí zapojit @media pravidla, které ale nedokáží přesně odrazit délku obsahu. Jakým způsobem se sloupce vytvoří a následně zruší (nebo naopak) už je dle vkusu každého.

Pomocí flexu se mi podařilo přiblížit asi nejvíc takto: Odkaz – ale kýženému cíli je to daleko a má to další problémy.


Reakce na Kcka:
„floatování, které ke stavbě layoutů skutečně není“
Zato flexbox k stavbě layoutů není už vůbec, protože trpí stejným problémem jako kdysi tabulkové layouty. :–)

Tomášeek:
„Není to tím, že tam před půlrokem s IE byli, k obsahu se díky technickému řešení nedostali a dále tam tedy nechodí?“
Nie nieje to tým. Stránka je funkčná aj na IE aj keď nevyzerá tak ako má.

„Pak je otázka, když tam ten float máš, proč jej duplikovat flexem.“
Pretože sa všetko nedá vyriešiť floatom a je to len ako posledná možnosť pre užívateľov starých explorerov.

„Názor "moderního" programátora.“
Weby robím viac ako 6 rokov, nevidím dôvod prečo sa babrať so starým explorerom keď ten rádovo dlhší čas zákazník nerád platí. Ako som už spomenul neriešim že sa web rozpadne, ale to že je funkčný to áno a to je dôležité.

„Jen jsme si třeba odpustili flex a nahradili jej floatem, který je málo cool.“
O čom tu točíš prosím ťa? Všetky veci sa nedajú urobiť float-om. Ale ak chceš kvôli 3% užívateľom ostatným 97% priniesť horší design tak hold. Osobne flex používam len tam kde skutočne treba, ale sú situácie kde sa tomu nedá vyhnúť a riešiť to hackmi alebo javascriptom je určite horšie.

„Pokud se rozpadnou, tak nepoužitelné jsou.“
Tvoj názor.

A nechceš nám o tom e-shope povedať viac? Napríklad jeho adresu? Rád by som sa pozrel :) No hate samozrejme.

Str4wberry:
„Zato flexbox k stavbě layoutů není už vůbec, protože trpí stejným problémem jako kdysi tabulkové layouty. :–)“
Akým problémom trpí flex?

Príspevky ako [#2] nie sú pre diskusiu vo vlákne prínosné. Akonáhle sa objaví problém so zložitejším popisom, na nejednom fóre sa objaví iniciatívny radca, ktorý bez akejkoľvek snahy a posúdenia prilepí do príspevku odkaz na kompletný manuál o flexboxe. Hoci je flex mocný nástroj, často existuje jednoduchšie a lepšie podporované riešenie.

pcmanik:
„Osobne flex používam len tam kde skutočne treba, ale sú situácie kde sa tomu nedá vyhnúť a riešiť to hackmi alebo javascriptom je určite horšie.“
V tomto konkrétnom prípade sa mu ale vyhnúť dá a to bez akejkoľvek náhrady JavaScriptom či hackov. Nakoniec sa všetci zhodneme, na tom istom. :-)

„Akým problémom trpí flex?“
Stránka v pozadí postavená na tabuľkách sa kedysi zobrazila až potom, čo sa všetok obsah načítal.

Str4wberry:
„Zato flexbox k stavbě layoutů není už vůbec, protože trpí stejným problémem jako kdysi tabulkové layouty.“
Toto sa mi nepotvrdilo v prehliadačoch IE11, Firefox 54.0.1, Chrome 60.0.3112.101 ani v asi neaktuálnych verziách prehliadačov Edge a Safari. Na testovanie som použil túto ukážku.

Snímka obrazovky z Chromu, ktorý načítaval obrázky a zároveň už zobrazoval text:

Flexbox trpí tím, že vykreslení flex sekce je závislé na celém svém obsahu, protože poslední element může zásadně ovlivnit finální zobrazení.

Např. na následující ukázce je poslední box hned na začátku díky vlastnosti order.

Když tedy tento obsah prohlížeč vykresluje, má dvě možnosti:

1) Vykreslovat stránku postupně s risikem, že bude poskakovat a hodně vykreslené plochy se zahodí a překreslí znovu.

2) Počkat na stažení celého obsahu a až potom vykreslit.

V případě stavby layoutu jiným způsobem (obtékání, absolutní posicování nebo grid) se může bez problémů vykreslovat, aniž by hrozilo, že se všechno zahodí.

Ano, u datově malých HTML stránek na rychlém připojení to nebude problém. U datově objemnějšího obsahu na připojení pomalém to ale už vliv mít může.

Str4wberry:
Ďakujem za objasnenie.