Na co se zapomíná a o čem se moc nemluví na webovém front-endu

Vývoj (nejen) HTML, CSS a toho jak ho známe, jde tak rychle kupředu, že se prostě nedá stíhat všechno, a zároveň je dobré pamatovat na základy toho, jak co funguje. Utvrdil jsem se v tom, že když kodér neví základy, tak je mu všechno to kopírování věcí a příkladů z css-tricks.com nebo codepen.io k ničemu.

Článek původně vyšel na autorově blogu.

Vývoj (nejen) HTML, CSS a toho, jak ho známe, jde tak rychle kupředu, že se prostě nedá stíhat všechno, a zároveň je dobré pamatovat na základy toho, jak co funguje. Utvrdil jsem se v tom, že když kodér neví základy, tak je mu všechno to kopírování věcí a příkladů z css-tricks.com nebo codepen.io k ničemu.

Věci jako box-model, float, clear, position…

Třeba box-model je věc stará jako internet a kódování samo. Nastavím elementu výšku a šířku, přidám padding a v některém prohlížeči je to o padding větší a v jiném je to velké, tak, jak jsem to nastavil. Ale proč to popisovat, když tohle je už hezky popsáno třeba na quirksmode.org. Já to řeším (ano hodně lidí mi vynadá kvůli performance) přes box-model, který přidám přes * všem elementům kromě :after a :before, nějak takto:

*{
  -webkit-box-sizing: border-box;
   -khtml-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  *behavior: url(js/libs/boxsizing.htc);
}

Prostě si zkus sám udělat web, že to nastavíš jako já přes * , a pak s tím, že to nastavuješ jen daným elementům, a podle toho se rozhodni.

Bez floatu by to nešlo, ale zároveň ani bez clearu. Opět ve zkratce, mám element, v něm dva elementy, které floatuji, a stane se to, že „vytečou“ ven z obalujícího elementu. Tomu se dá předejít tím, že ten obalující div „clearnu“. Opět nějaké to čtení na quirksmode.org, které popíše více.

Já používám v LESSu clearfix takto:

// MIXINS.less
.clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

// UTILITIES.less
.c {
 .clearfix();
}

a poté už jen pro obalující element přidám .c; a je vyřešeno.

Pokud používáš :after a :before, tak pamatuj, že v takto „clearovaném“ elementu si s nimi „neškrtneš“.

S position:relative a :absolute je prostě sranda, když víš, co a jak si s nimi můžeš dovolit.

Třeba jedna věc z testovacího PSD (pro nového kodéra) obsahovala i tuhle „vyfičenost“, že mám dvousloupcový layout, article a aside, a mezi nimi je čára; problém je v tom, že nevím, který sloupec je delší, takže jak to udělat.

html-css-js-fixy-position

Každý to řešil jako border na article, protože v PSD byl vyšší. Chápu, že ne každému to dojde, takže při pohovoru byla jedna z otázek, jak to udělat jen pomocí CSS bez nějakého JS, aniž bych věděl, který je delší. A obrázek nebo flexbox není to správné řešení. :)

Řešení? Obalující div dostane postion:relative a element pro čáru position:absolute a výšku 100%.

Proč to dělat takhle, když to může být takhle… protože IE8!

Co v jakém prohlížeči ne/funguje, si můžeme jednoduše čeknout na caniuse.com.
Vezmeme si z toho hlavně to, že nás brzdí IE8, ve kterém toho nefunguje opravdu hodně, ale je to takový problém?

HTML5 elementy

Jo jo, já vím, používám je, ale bez JS si v IE8 neškrtnu, bohužel. Používám proto Modernizr, kde si do své vygenerované verze přidám html5shiv rovnou s detekcemi, ze kterých používám v poslední době jen touch a inline-svg.

Jen pozor na tisk v IE8, pokud používáš HTML5 tagy a ladíš i tisk, tak si musíš v modernizeru zapnout html5shiv – printshiv.

:first-child Vs. :last-child

Jednořádkový UL list, margin na odsazení používám zprava a na :last-child dám margin:0, ale co kdybych to otočil? Odsazení dám zleva a použiju :first-child. A ano, tímto docílím, že mi to bude fungovat všude.

rgba() Vs. rgb()

Jak se dozvíme, tak rgba funguje všude, kromě IE8. Takže na typický overlay pro lightbox buď použiju obrázek, a nebo třeba:

background:rgb(0,0,0);
background:rgba(0,0,0,.6);

Ano! V IE8 nebude mít uživatel poloprůhledné pozadí, ale opravdu nám to vadí?

input:placeholder

Věc, která se opakuje stále a stále dokola, grafika formuláře s inputy a v inputech napsáno, co má uživatel vyplnit. Když to udělám přes placeholder, tak co se stane nejen v IE8 a 9? Nezobrazí se, proto myslete na to nejen při dělání grafiky, ale hlavně při kódování. A ano, řešení je, a vůbec ne složité.

Velikost fontu rem vs. px

Mám rád REM, na rozdíl od EM nedědí velikost a při správném nastavení font-size na body mi parádně řeší font-size na devices, ale opět – rem nefungují v IE8.

Takže mám další mixin:

.size(@font-size: 16, @line: 1) {
    @rem: (@font-size / 10);
    font-size: @font-size * 1px;
    font-size: ~"@{rem}rem";
    line-height: @line;
}

který mi udělá v CSS jak PX, tak rovnou i REM s tím, že si nastavuji hned i line-height, takže pak deklarace pro element je takhle:

p {
  .font-size(18, 1.6em);
}

Pozor ještě na :after / :before a problémy s z-indexy. V IE8 se s nimi nedá pracovat.

Co se hodí vědět a znát

Je hodně věcí, které se nedočteš, nevíš o nich, dokud je sám neřešíš nebo nemusíš řešit. Jako třeba:

border-radius

Mám čtverec 50x50px a chci ho kulatý, co udělám? Nastavím border-radius na 25px, ne? Ano, fungovat to bude, ale…

Doporučuju border-radius nastavovat vždy sudý, tzn. klidně o pixel víc, protože pak se nestane to, že to je někde „divně okousané“.

border

Nebráním se kopírování / inspirování někde jinde, jako třeba u výborného triangle generátoru, kde v sekci Tips je hezky popsáno, co dělat, když…

Transitions – text-align

Přes transition nejde animovat text-align:left a text-align:right, je dobré na to myslet.

Transitions – gradient

Neříkám, že to nejde bez nějakých fixů á la na :after dám hover stav, ale samotná změna gradientu z jednoho stavu do druhého animovat nejde.

IE9 a nižší

Třeba nezvládne víc než 31 značek <style>, ne více než 4095 selektorů ve stylech a tři úrovně zanoření @import. Více na http://support.microsoft.com/kb/262161.

Nezapomeň na…

Problémy a jejich řešení; vlastně to nejsou ani tak problémy, jako věci, které mají řešení.

meta-tag viewport

Neděláš pro web responsive? Ale stejně chceš, aby to mělo nějakou štábní kulturu, a tak si k šířce webu přičti na každou stranu třeba 40px a tohle číslo zapiš hlavičky:

<meta name="viewport" content="width=1300">

Ano, není to nej řešení, ale dokáže to opravdu hodně pomoci, aby třeba iPad / iPhone web zobrazil v pořádku.

button bez cursor:pointer

Vše, co má nějakou akci, by mělo být ukázáno tím, že se změní cursor na hover. Proto nezapomínej přidat cursor:pointer pro button.

Tečkovaný border kolem aktivního prvku

Kliknu na tlačítko, které provede něco pomocí JS, tak se mi (nejen) ve FF a IE zobrazí tečkovaný border. Stejně tak se podobný „focus“ zobrazí na inputu třeba i ve Chrome. A přitom na element stačí přidat:

.el,
.el:focus {
	outline: 0;
}

Transform Vs. position:fixed

Pokud posouváš třeba element přes něco jako: transform: translateZ(0px) translateX(0px); , tak pamatuj, že pokud je v něm nějaký element s position:fixed, tak nebude fixed, ale absolute vůči elementu. Příkladem třeba super jQuery knihovna SLY.

advertisement, advertising, ads, banner…

Pojmenuj takhle element a můžeš si být jist, že to uživatel třeba s AdBlockem neuvidí.

Pokud tedy nechceš, aby právě tento blok neviděl. To se mi pak v tom případě osvědčil název „banner“.

Bez bugů by to nešlo

Aneb říkáš si, jak jsi krásně něco udělal, nastyloval, připravil a pak BUM, (třeba) ve FF to nefunguje.

OSX + Chrome a barva scrollbaru bez připojené myši

html-css-js-fixy-scroll

Nevím zda se tomu dá říkat přímo bug, ale problém je v tom, že pokud je web světlý, patička tmavá, tak na <body> nastavím barvu patičky, protože když bude web „krátký“, aby tam nebylo to světlé pozadí. Problém nastává, když nemám zapnutou myš a funguju na trackpadu. Pak se scrollbar schovává a nastavuje se kontrastní barva vůči barvě na <body>.

Takže pozor na světlý web s tmavou patičkou a nastavením barev. Dost často se mi stává, že třeba v autobusu hledám scrollbar na stránce.

overflow:hidden + border-radius

Máš box se zakulacenými rohy, v tom obrázek, který se má oříznout podle boxu, takže na element nastavíš overflow a border-radius, ale někde to začne bugovat, ale tak, že to rohy obrázku neořízne, takže jdeš a nastavíš stejný overflow a border-radius na samotný obrázek, ale nešlo by to jinak? Jasně že šlo, zkus nastavit rotate :)

Buď budeš řešit pixel perfekt a nastavíš prostě rotate:360deg; a nebo klidně jen 0.0000001deg a vsadím se, že vše bude fungovat.

Uděláš vymazlený pixel-perfect ikonkový font, skoro všude to funguje krásně, ale někde (hlavně Win) nejsou čáry přesně 1px, ale třeba 1.5px, a co s tím? Dej tam rotate!

position:fixed

Nejen přímo na mém portfoliu se mi stalo, že jsem nastavil něco jako position:fixed, ale třeba v Safari mi to bugovalo, tak, že to na scroll divně poskakovalo. Problém vyřešilo opět „zapnutí“ transformací:

-webkit-transform:translate3d(0,0,0);

Bootstrap rád nemám, ale i tak je k něčemu dobrý, aneb hezký a přehledný buglist getbootstrap.com

Závěr

Článek dlouhý, informací trošku, obrázků málo, přiučení pro většinu kodérů nula-nula-nic, ale i tak budu rád za feedback, sdílení nebo třeba jen komentář, že tohle nebo tamto děláš jinak, protože…

Takže díky za jakoukoliv motivaci něco dalšího příště zase sepsat. Třeba o performance nejen v CSS.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 19

Přehled komentářů

někdo
Marťas Border-radius
jaahoo Pěkný
kaktuss Re: Pěkný
vaclav.sir Border aktivního prvku
Nikdo button bez cursor:pointer
iiic article a aside, a mezi nimi je čára…
xerno Re: article a aside, a mezi nimi je čára…
Ondřej Řešeníuváděného příkladu
Petr Urbánek Re: Řešeníuváděného příkladu
Petr Urbánek Re: Řešeníuváděného příkladu
Ondřej Řešení uváděného příkladu
Radek Tůma Velikost fontu rem vs. px
Petr Urbánek Re: Velikost fontu rem vs. px
Radek Tůma Re: Velikost fontu rem vs. px
Petr Urbánek Re: Velikost fontu rem vs. px
Radek Tůma Re: Velikost fontu rem vs. px
renne
renne
Zdroj: https://www.zdrojak.cz/?p=13581