Přejít k navigační liště

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

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

Články Webdesign

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.

Nálepky:

Č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.

Komentáře

Subscribe
Upozornit na
guest
19 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
někdo

Stačí pro motivaci, že se mi to líbilo, a někdy se něco určitě může hodit? :-)

Marťas

U tohoto bodu jsem se pobavil.. :)

Jinak pár dobrých tipů

jaahoo

Článek pěkný a nováček se určitě dozví něco nového. Já osobně jsem vše víceméně znal. Pár bodů:

  • Nikdy jsem nebyl příznivec clearfixu vždy mě to přišlo takové…
    nečisté a taky moc rád využívám :after/:before. Začal jsem tedy
    používat na rodiče overflow:hidden (když vím že mi to nebude vadit) a
    zatím jsem s tím větší problémy neměl.
  • S těmi nth-childy u IE8 bych
    radši použil selectivizr.com je to strašně návykové a je škoda
    se omezovat jen kvůli IE.
  • Border radius jsem trošku nepochopil, pokud
    to chci kulaté tak dám border-radius: 100% ne? =)
  • To omezení počtu selectorů u IE je pěkná „vlastnost“. Člověk se s tím moc často nesetká (já osobně jen jednou) ale je dobré to vědět, protože pak jen člověk sedí, čumí a neví =)

Jinak něco jako tenhle článek ale ve videu: http://www.confreaks.com/videos/3360-railsconf-front-end-fun-not-frustration

A pak hrátky s border-radiusem: https://www.youtube.com/watch?v=JSaMl2OKjfQ&feature=youtu.be

PS: je možnost někde stáhnout to testovácí PSD?

kaktuss

a ja som si vždy myslel, že border-radius: 50% stačí :-)

vaclav.sir
  • 4095 selektorů je ve skutečnosti 4095 pravidel. Což vypadá mnohem hůř, ale zase je to per-sheet.
  • Nesouhlasím s potlačením zvýraznění focusovaného prvku. To zvýraznění má svůj důvod. Když už to tolik vadí, tak bych byl spíš už pro this.blur() při té akci, ale pokud se to má udělat dobře, tak to není úplně jednoduché (prvku je potřeba nastavit tabindex=1 a při focusu kteréhokoli prvku ho nastavit zpět na jeho původní hodnotu).
Nikdo

ad. button bez cursor:pointer
V principu nevadí, když button nemá pointer, jen je třeba to tak mít cíleně a ne na to zapomenout u jednoho tlačítka z deseti.
Třeba Google má u skoro všech tlačítek natvrdo default, stamiliony lidí to používají a nikdo v tom problém nevidí, někde dokonce nemají ani hover verzi (např. odhlášení).

A nejde jen o Google. I MS pointer nepoužívá úplně všude (třeba v emailu).

iiic

„dvousloupcový layout, article a aside, a mezi nimi je čára“ bych řešil asi ještě jinak, bez elementu pro čáru… přeci jen by to byl prázdný element, které pochopitelně žádnou obsahovou hodnotu nenesou a o vzhled se má starat css, nikoliv html.

Takže tady by šlo dát to jako border a to oběma jak pro article, tak pro aside, prvnímu zprava, druhému z leva a (třeba) ten druhý posunout pomocí záporného margin o šířku čáry doleva. Tím budou obě čáry na sobě a vizuálně budou vypadat jako jedna dlouhá stejně, jako nejdelší element.

Zdeněk Kopš

Take reseni, ale neuplne. Za predpokladu promenne sirky v dnesni responzivni dobe zaporny margin posune cely prvek a zprava bude kus prazdneho mista. Radeji bych to resil position relative na rodici a absolute na detech, kde oba pritisknu ke sve strane, dam top:0, podle potreb sirku – treba 79% a 20% s tim, ze border bude mit 1%. Tim se ramecky take prekryji. Reseni s pevnou sirkou cary nebo jednoho z prvku jsou na podobnem principu, akorat by se jednomu z prvku nastavil fixni pozitivni margin. Reseni pomoci JS povazuji za velmi nestastne, predevsim kvuli performance. Hlavne pri te promenne sirce by byl treba event window.onresize.

Ondřej

Docela by mě zajímalo, jaké řešení jste měl na mysli u toho příkladu s dvou sloupcovým layoutem, kde se dělící čára natahuje dle delšího sloupce. Jsem to zkoušel a nedaří se. Mohl bych vidět ukázku kódu?

Díky

Ondřej

Jo, děkuji. Po vysvětlení je řešení celkem jednoduché. Zase jsem se něco přiučil.

Radek Tůma

Nemohl byste přesně vysvětlit, co který řádek dělá? Aby se mi to podařilo pochopit, tak jsem to kompiloval do CSS, ale kompilátor zahlásil @font-size is udefined.

Radek Tůma

Děkuji. Co přesně dělá řádek font-size: ~“@{rem}rem“;? Tomu jedinému nerozumím, v LESS teprve začínám. Děkuji.
Radej Tůma

Radek Tůma

Mě šlo o ten konkrétní řádek, proč tilda, proč rem ve složených závorkách, co to je za konstrukci. Možná by to šlo i takto zkrátit:

zdrojový kód

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

renne

máš ten příklad jak jsme dělali minulou hodinu ?:D

renne
  • { /* univerzální selektor – platí pro všechny elementy na stránce */
    margin:0;
    padding: 0;
    }

body {
background: rgb(152,152,152);
}

.menu ul { /* nastavení celé oblasti navigace /
width: 175px;
margin: 10px;
list-style-type: none; /
odstranění znaku odrážek z navigace */
}

.menu li { /* nastavení jednotlivých položek seznamu */
margin-bottom: 10px;
}

.menu a { /* nastavení jednotlivých odkazů /
display: block; /
převedení odkazu na blokový element – tím se odkaz roztáhne přes celou šířku položky li */
height: 21px;
background: url(menu_back.jpg) top;
padding: 7px;
color: #000;
font-size: 105%;
font-weight: bold;
text-decoration: none;
transition-property: background; /* plynulá animace pozadí /
transition-duration: 1s;
border-radius:25px 25px 0px 0px; /
časové nastavení plynulé animace /
}
.menu a:hover { /
nastavení odkazu po najetí myši */
color: rgb(255,0,0);
background: url(menu_back.jpg) bottom;
padding-left: 15px;
}

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.