Jak webovou stránku co nejlépe a nejjednodušeji převést do responsivní podoby. Provedeme vás převodem krok za krokem.
Jak bylo na virtuální konferenci FOSDEM.
Jak je to s přístupností mobilního menu z klávesnice? Používáte odkazy “více” a “zde”? Znáte rozdíl mezi aria-label, aria-labelledby a aria-describedby? Je PDF strojově čitelný formát z pohledu zákona o přístupnosti?
Posledních pár let mě baví se zabývat bezpečností aplikací. Čistě technicky. A když člověk tyhle věci implementuje, dostane se k zajímavým problémům, které by ho ani nenapadly. A tak se stalo, že jsem se dostal k proxy. Jako slepý k houslím.
Moc pekne. Konecne po dlouhe dobe clanek, ktery neskoncil driv, nez-li jsem se stacil zacist.
Díky za článek, pro začátečníky supr
Nechci bejt za hejtra, ale jen si trošku nejsem jistej, že tenhle článek odpovídá levlu lidí, co si tenhle web čtou.
Ale neberte to prosím špatně, možná bych založil novou rubriku „beginners“ :))
Re: Díky za článek, pro začátečníky supr
My si naštěstí celkem jistí jsme 8-)
Re: Díky za článek, pro začátečníky supr
Vojto, ty představy o davech zkušených českých vývojářích (jak jsi psal i na Twitteru) jsou vážně zkreslené. Věř nám. :)
Pokud máš sám nějaký materiál pro zkušenější, sem s ním! Zdroják bude hrozně rád.
znalosti je potřeba aktualizovat
Autor článku by měl pravidelně aktualizovat své znalosti. Pak se mu nestane přešlap typu „nepoužívejte pixely – protože při změně velikosti písma se všechno rozbije“
To platilo kdysi. Dnes prohlížeče nezvětšují písmo, ale zoomují kompletní stránku. Tím příčina problémů padla a je nesmysl všechno uměle přepočítávat na „em“, která do stylů jen zanáší chaos.
A takových historických „důvodů“ je tam víc…
Re: znalosti je potřeba aktualizovat
Děkuji za komentář.
Je tedy zbytečné házet návštěvníkům klacky pod nohy.
Co „historického“ tam máte dál?
Re: znalosti je potřeba aktualizovat
To bychom mohli ještě diskutovat: 1. které prohlížeče? 2. jak se tato změna projeví v konkrétních prohlížečích? Nemluvě o chybějícím doporučení použit sass, less. Viděl jsem začátečníka, který na základě podobně „kvalitního“ článku všechno ručně přepočítával pomocí té šílené kalkulačky na http://jecas.cz/responsivni-web (protože podstatu výpočtu nechápal) a nebyl to věru hezký pohled.
Dále tam mám třeba rovnou to tvrzení „používejte em“ místo pixelů. Aniž by se vysvětlilo, jaké jsou s tím problémy. Přitom řešení existuje: rem! Dnes IE8 můžeme v klidu škrtnout.
Re: znalosti je potřeba aktualizovat
Chrome, Firefox, IE – všude si uživatel může nastavit vlastní velikost písma.
Projeví se to potom (jak jsem možná psal) rozpadnutím layoutu, když se break-point v pixelech adekvátně nepřizpůsobí jiné velikosti písma.
Zda použít SASS, LESS nebo něco jiného je otázka preferencí každého, zvlášť v případě, kdy se bavíme o převodu starého webu, který nic takového nepoužívá. Je k úvaze, jestli je více práce začlenit do projektu preprocesor nebo si pár hodnot přepočítat na té šílené kalkulačce.
Že si dnes můžete Explorer 8 škrtnout je jistě zajímavá informace, ale článek je i pro ty, kteří nemohou.
Firefox
Ve firefoxu lze velikost zobrazované plochy přiblížit zařízení s malým displejem pomocí Ctrl+Shift+M.
box-sizing
Jen technická – neprefixovaný zápis (v tomto případě box-sizing) má být až jako poslední.
Re: box-sizing
Zda uvádět nejdříve vlastnosti s prefixy, nebo naopak bez nich, je podle mne dost sporné. Smysl dávají oba přístupy. V praxi mi to potom přijde celkem jedno.
Proč si myslíte, že má být neprefixovaný zápis jako poslední? Děkuji za odpověď.
Re: box-sizing
Pokud je podporovaný prefixovaný zápis níže, prohlížeč použije jej namísto standardizovaného, i když jej bude umět taky. Teoreticky pak mohou mít obě verze rozdílné implementace, přičemž se dá dobře předpokládat, že ta neprefixovaná bude aktuálnější atd. Jeji umístění až na konec tak zajistí, že prohlížeč použije nejmodernější podporovanou implementaci.
Přikladem budiž třeba linear-gradient, který používá v případě -webkit-linear-gradient lehce odlišnou a zastaralou syntaxi (nemluvě o ještě starším -webkit-gradient).
Nevidím na tom nic sporného, v článku použitý přiklad není nic jiného než (stále hodně rozšířená) bad practice.
Re: box-sizing
Ono to právě není tak jednoduché.
Umístění neprefixované vlastnosti nakonec může způsobit, že se změní zobrazování, až se prohlížeč naučí vlastnost bez prefixu, která se bude chovat jinak než ta s prefixem a přebije ji.
Re: box-sizing
No, tak pokud se snad bude neprefixovaná verze chovat jinak, tak se dá očekávat, že bude právě toto chování odpovídat specifikaci a mít také blíže ke konkurenčním implementacím (tj. jiným vykreslovacím jádrům). Ve vašem příkladu totiž dochází k tomu, že jedna prefixovaná implementace je nějak chybná/odlišná oproti ostatním, tj. jeden prohlížeč to zobrazuje jinak než ty další, v extrémním případě dochází k tomu, že to zobrazuje jinak každý prohlížeč. A to tedy stále nevidím důvod takovéto zobrazování podporovat preferencí prefixovaných zápisů. (Ledaže by bylo nekonzistentní zobrazování záměr – třeba u nějakého testu.)
(Jasně, dvě odlišná aktuální vykreslovací jádra zpravidla vždy zobrazí tu samou stránku s menšími odlišnostmi a zřejmě tomu tak vždy bude, mám teď ale namyslí spíše konkrétní případy, kdy budete mít čtvereček s gradientem o čtyřech barvách, border-boxem a různě kulatými rohy a konkrétní prefixovaná implementace bude zastaralá, chybná nebo tak.)
Re: box-sizing
Risiko vlastnosti bez prefixu jako poslední je v tom, že vytvoříte zápis, který může v budoucnu vést k jinému výsledku, než byl zamýšlen během tvorby.
Jako poslední (s nejvyšší prioritou) uvedete kód, který prohlížeče momentálně nepodporují, s vidinou, že tak někdy začnou, navíc dle specifikace aktuální v době vytvoření webu, což se od finální implementace nakonec může lišit.
Uvést neprefixovanou vlastnost jako poslední je tedy takový lehký hazard.
Re: box-sizing
Zcela souhlasím, to je výborná argumentace, proč má být prefixovaný zápis poslední ;)
Chybka
Díky za článek, pěkný! :-)
Jen… asi se budu trochu opakovat s tím upozorňováním na překlepy, ale… Martine? :-)
„…obrazovky, kdy se aplikují odlišn8 CSS pravidla…“
Re: Chybka
Díky, už jsem přišel, jak to vzniká.
Re: Díky za článek, pro začátečníky supr
Nějak nevím, jaký tweet myslíš, zkoušel jsem se dívat.
Samozřejmě vycházím ze svých zkušeností. U nás v userte.chu tohle ovládá prakticky každej a bere to jako level 0.