KODÉR.BLOG

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

07 Oct 2014

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 nadá skrz 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, 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 nima "neškrtneš".

S position:relative a :absolute je prostě sranda, když víš co a jak si s nima 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 dvou sloupcový layout: article a aside a mezi nima je čára, problém je v tom, že nevím který sloupec je delší, takže jak to udělat.

Každý to řešil jako border na article, protože v PSD byl vyšší, chápu, že né 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 pro to Modernizr, kde si do své vygenerované verze přidám html5shiv rovnou s detekcema, ze kterých používám v poslední době jen touch a inline-svg.

Jen bacha 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 typickej 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ě kódování. A ano řešení je a né vůbec složité :)

Velikost fontu rem Vs. px

Mám rád REM, narozdíl od EM nedědí velikost a při správném nastavení font-size na body, mi parádně řeší font-size na devicech, 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 se z-indexama. V IE8 se s nima 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 kulatej, 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ů alá 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í kultůru, tak si k šířce webu přičti na každou stranu třeba 40px a tohle číslo zapiš ho hlavičky:

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

Ano, není to nej řešení, ale dokáže to opravdu hodně pomoct, 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 teda nechceš, aby právě tento blok neviděl. To se mi pak v tom případe 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

Nevím zda se tomu dá říkat přímo bug, ale problém je v tom, že pokud je web světlej, patička tmavá, tak na <body> nastavím barvu patičky, protože když bude web "krátkej", tak aby tam nebylo to světlé pozadí, ale problem nastává, když nemám zapnutou myš a funguju na trackpadu, tak 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ýma rohama, 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áš vymazlenej pixel-perfect ikonkovej 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, ale tím způsobem ž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 nečemu dobrý, aneb hezký a přehledný buglist getbootstrap.com

Závěr

Článek dlouhej, 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.

Sdílet:

comments powered by Disqus