Timesoft

Osobní stránky webkonzultanta

Autor: Radomír Panna (page 10 of 11)

Obtékání float

Klasický problém při použití float uvnitř neplovoucího prvku je, že jej obteče. viz následující ukázka:

[sourcecode language=“css“]div.box {border: 1px solid red;}
div.left {float: left; width: 30%; }
div.right {float: right; width: 60%;}[/sourcecode]

Problém je ukázán zde: http://tinkerbin.com/nUdXjaJF
Původním řešení bylo použití dalšího prvku, které obtékání zruší. Například @pixy na svém původním blogu ukazoval použití prvku hr.cistic
Novější řešení nepoužívá další prvek, ale vystačí si pouze s doplněním kódu do rodičovského prvku. Schválně si zkuste do div#box přidat: overflow: auto; width: 100%;

Líbil se vám článek? Sdílejte jej prosím:

Zkouška nanečisto

Pokud si chcete s html + css + javascriptem hrát, aniž byste si cokoli ukládali na disk, můžete použít následující aplikaci: http://tinkerbin.com/. Ve třech oknech si hrajete s kódem, ve čtvrtém okamžitě vidíte výsledek.




Líbil se vám článek? Sdílejte jej prosím:

CSS pseudo-třídy

Co to je? Třídy, které přidají speciální vlastnosti na některé prvky. Nejznámější pseudo-třídy jsou pro odkazy, např.: a:hover
Někdy se mi přehled docela hodí, na internetu jsem je vždy nacházel roztříštěné, většinou nebyly na jednom místě.

Obecný zápis je:
selektor:pseudo-třída {atribut:jeho_hodnota}
selektro.trida: pseudo-třída {atribut:jeho_hodnota}

Dynamické pseudo-třídy:

a:link {color: black;}         /* nenavštívený odkaz */
a:visited {color: red;}        /* navštívený odkaz */
a:hover {color: blue;}        /* reakce na myš */
a:active {color: green;}    /* vybraný odkaz */

Nejčastěji je používána kombinace
a {color: red;}            /* barva se aplikuje na všechny 4 pseudo-třídy */
a:hover {color: blue;}

Pořadí jednotlivých tříd je uvedena tak, jak by měla být, aby jednotlivé linky fungovaly, tj. třída hover musí být uvedena po link a visited, active musí být uvedena za hover,

input:fokus {background-color: red;}
/* změní barvu pozadí po aktivaci myší, funguje pouze na prvcích, které čekají na událost z klávesnice*/

První a poslední

Následující pseudo-třídy umožňují formátování prvních nebo posledních potomků jiných prvků.

li:first-child {color: red;}
/* li je potomek ul(ol), první výskyt obarví text zvolenou barvou */

li:last-child {color: green;}
/* li je potomek ul(ol), poslední výskyt obarví text zvolenou barvou */

p:first-letter {color: blue;}
/* vybere první písmeno z každého odstavce */

p:first-line {color: green;}
/* vybere první řádek odstavce; pro first-letter a first-line lze použít pouze následující atributy: font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height, float, clear; first-letter a first-line budou fungovat pouze s blokovými prvky. */

*:lang(fr) {font-style: italic;}
/* vyznačí se všechna slova napsaná ve francouštině */

p:first-of-type {color: blue;}
/* vybere první prvek rodiče a na něm nastaví zvolenou barvu */

p:last-of-type {color: green;}
/* vybere poslední prvek rodiče a na něm nastaví zvolenou barvu*/

p:only-of-type {color: red;}
/* Vybere pouze takový prvek, který je pouze jediný potomek rodiče*/

p:olny-child {color: orange}
/* Vybere pouze takový prvek, který je jediným potomkem rodiče*/

p:nth-child(2) {color: blue;}
/* Vybere pouze jeden prvek, který je jako druhý v pořadí rodičovského prvku, IE7,8 nepodporuje */

p:nth-last-child(2) {color: red}
/* Změní barvu písma potomka rodičovského prvku počítáno od posledního výskytu, IE7,8 nepodporuje */

p.nth-of-type(2) {color: blue}
/* Změní barvu písma potomka rodičovského prvku počítáno od začátku, platí na výskyt p, IE7,8 nepodporuje  */

p.nth-last-of-type(2) {color: green}
/* Podobně jako předchozí, počítáno od konce. IE7,8 nepodporuje */

Ostatní

:root {background: red;}
/* Nastaví pozadí pro celý dokument html, IE7,8 nepodporuje  */

p:empty {color: red}
/* Nastaví barvu pro prázdné odstavce, IE7,8 nepodporuje */

:target:before {content: url(/images/lamp.gif)}
/*viz odkaz; neodzkoušeno; nefunguje v IE*/

input:enabled {background:red}
/* Na všechny povolené vstupní prvky aplikuje zvolenou barvu, IE7,8 nepodporuje */

input:disabled {background:green}
/* Na všechny nepovolené prvky aplikuje zvolenou barvu, IE7,8 nepodporuje */

input:checked {background:blue}
/* Na zaškrtávací pole aplikuje zvolenou barvu, funguje pouze v Opeře */

:not(p) {color: blue}
/* Všechny prvky v dokumentu, mimo vyjmenovaný, budou obarveny zvolenou barvou, IE7,8 nepodporuje  */

::selection  { color:#ff0000; }
::-moz-selection { color:#ff0000; }
/* myší označení prvky budou obarveny zvolenou barvou,  IE7,8 nepodporuje, pro Firefox zvlášť zápis, Jsou podporovány pouze některé atributy: color, background, cursor, outline */

Pokud jsem na nějakou pseudo-třídu zapomněl, budu rád, když ji v komentářích naznačíte, případně mi pošlete mail.

Update 26.20.2012:

Pseudo třídy můžeme doplnit o magické „n“. Příklad: p:nth-child(5n+1) – vybere první odstavec a následně pak každý pátý. Krom číselných operací, lze dosadit i klíčová slova odd a even – sudý a lichý, což je daleko zajímavější.

 

Zdroje:

CSS Selector Reference. W3SCHOOLS. Http://www.w3schools.com/ [online]. 6.4.2012 [cit. 2012-04-06]. Dostupné z: http://www.w3schools.com/cssref/css_selectors.asp
MEYER, Eric A. Eric Meyer o CSS: kompletní průvodce. Vyd. 1. Překlad Jan Pokorný. Brno: Zoner Press, 2007, 560 s. ISBN 978-80-86815-64-0.

Líbil se vám článek? Sdílejte jej prosím:

Není grafik jako grafik

Na poli webových aplikací se pohybují již nějaký ten pátek a za tu dobu jsem stihl vyzkoušet několik grafiků – studenty počínaje a velkými grafickými studii (grafiky v nich) konče. Každý typ grafika má něco pro a něco proti. Pokusím je teď zhodnotit z hlediska webkonzultanta a pod každý napsat klady a zápory. U některých je to ovšem velmi složité, záleží případ od případu. Zcela jistě následující řádky nelze použít univerzálně. Určitě existují výjimky. Navíc je rozdíl mezi malým a velkým projektem. Následující řádky spíše řeší grafika z pohledu malého projektu.

Sám sobě si

Prvním typem je samotný webkonzultant. Na úplném začátku jsem se – nerozuma – pokoušel klientům nabízet kompletní služby jen já sám. Tj. navrhl jsem grafiku, nakódoval, naplnil daty, zprovoznil. Bohužel hned zkraje se ukázalo, že moje grafické cítění není to pravé ořechové a nápady nemají žádnou šťávu. Tedy většinou ji nemají, někdy se mi nějakým záhadným způsobem povedlo trefit se do vkusu zákazníka a dokonce se mi to i líbilo, pár takových webů dokonce ještě běží, ale sebekriticky jsem musel uznat, že při větším počtu klientů tudy cesta nevede.

Klady:
+ cena – realtivně ušetřím peníze

Zápory:
čas – nuluje výhodu, protože platí čas = peníze
nedokonalý – nesladěné prvky

Grafik – grafické studio

Druhým typem je grafické studio. Vyzkoušel jsem malé i velké, ovšem výsledky byly nachlup stejně chybové. Jako první jsem vyzkoušel malé studio, nebo spíše jeho grafika, mého kamaráda. Druhé pak bylo velké studio, které má v republice jméno. Rozdíl mezi oběma návrhy byl, když pominu obsah grafiky, jen v ceně. Oba grafici totiž zcela zapomněli, že web není tisknutelné médium a podle toho tak k práci přistupovali. Do návrhu zakomponovali věci, které by se, v případě schválení, daly velmi těžko použít. Zajímavé je, že v případě velkého studia se s cenou dostáváme daleko za hranici čtvrté skupiny – viz dále (nehodnotím náklady firmy, a podobné věci, ale kvalitu výsledku).

Klady:
+ cena – v případě malého studia
+ čas – mají nápady, jsou rychlí

Zápory:
cena – v případě velkého studia
médium – navrhují pro tisk, nikoli pro web
rychlost – u velkého studia problém
těžkopádné úpravy

Student

Třetím typem jsou pak studenti. Možná někoho hned z kraje napadne: “aha levná pracovní síla”, nebo tak něco podobného, ale hlavní důvod je trošku někde jinde.
Podle newsoftdelphi bylo v prosinci loňského roku zaregistrováno přes 360 mil. domén. Určitě ne všechny fungují, tj. ne na všech je nějaký obsah. Nicméně toto číslo naznačuje, že je velice těžké vymyslet něco originálního, neokoukaného. Jeden kopíruje od druhého, další zase třeba sloučí prvky, které se mu líbí, několika webů do jednoho, apod. Hlavní důvod pro vyzkoušení studenta byl tedy v tom, že nemají vypracován svůj “podpis”. Jde totiž o to, že pokud srovnáte práce daného grafika, zjistíte, že používá většinou tytéž prvky, tj. podepíše se nevědomky na svém díle. Samozřejmě nelze to brát paušálně. Mou domněnku mi však nedávno potvrdil i jeden klient, který řekl, že s výtvorem se musí ztotožnit, musí to pro něj mít náboj, musí k němu promlouvat, což drtivá většina webů nedělá. Má jen pár prvků, které se, jak říkám, opakují.
Student většinou dokáže přinést něco nového, neokoukaného a koneckonců , proč si to nepřiznat, je opravdu levný. Jeho práce má náboj, myšlenku. Bohužel mínusové body občas sbírá na nedodělcích. Tam, kde by profesionál vše dopracoval do detailu, to chybí. Řekl bych, že neznalost a nezkušenost. na jedné straně pomáhá, na druhé zase dělá problém. Když je to ovšem student šikovný a zapálený pro věc, dokáže si chyby uvědomit a rychle upravit. Pokud ne, je lepší práci svěřit někomu jinému.

Klady:
+ absence “podpisu”
+ cena – jsou bezkonkurenčně nejlevnější
+ čas – většinou rychlé – srší nápady

Zápory:
nedodělky – nesladěné prvky

Profesionální webdesigner

Další skupinou, kterou jsem vyzkoušel, byli profesionální webdesignéři. U nich je už vidět pokrok. Ve většině případů jim stačí říct pár požadavků a o víc se nestarat. Není nutné nějak specifikovat drátěný model, jelikož možnosti prohlížečů znají, vše je sladěno, je funkční. Takový návrh zabere, v porovnání s předchozími, minimum času, vše je většinou hotovo napoprvé, případně s drobnými připomínkami rychle upraveno. Klient je takřka vždy nadmíru spokojen. Nevýhodou může být onen “podpis” (ne všichni jej nutně musí mít) a také cena. Ale v porovnání s mým grafickým návrhem, nad kterým strávím x hodin, je to pakatel. To samé platí i u ostatních.

Klady:
+ cena – relativně ušetřím peníze
+ sladěné prvky, nedodělky nehrozí
+ rychlost

Zápory:
cena – relativní
možnost “podpisu”

Závěr

U různých klientů nabízím různým typ grafika. Pokud klient spěchá, hledí na korunu (pověstné vrtané koleno), pak zvolím studenta. V případě, že klient na korunu nehledí, chce špičkový návrh, zvolím profesionálního webdesignera. Klasické grafické studio volím už velmi málo – většinou dostávám za hodně peněz, málo muziky.

Líbil se vám článek? Sdílejte jej prosím:

Selektory v CSS

Základní zápis selektorů v css je všeobecně známý.  Možná na úvod by bylo vhodné si je lehce připomenout:

[sourcecode language=“css“]h1 {border-bottom: 1px solid red;}
p.black {color: black;}
div#red {background-color: red;}
[/sourcecode]

Toto je úplný základ, který snad ovládají všichni. Pojďme se ale podívat na vyšší level zápisu. Následující zápisy nejčastěji využijete tehdy, když stylujete html dokument, který nemáte možnost ovlivnit. Jestliže ji totiž máte, nic vám nebrání si k jakémukoli prvku dopsat nějakou tu třídu, nebo identifikátor.

Selektory s atributy

[sourcecode language=“css“]a[name] {color: green;}
a[href=“https://www.timesoft.cz“] {color: green;}
a[title~=“Foto“] {color: green;}
a[title*=“Foto“] {color: green;}
a[title^=“Foto“] {color: green;}
a[title$=“Foto“] {color: green;}[/sourcecode]

1. vybere veškeré odkazy, které obsahují atribut name
2. obdobně jako 1., jen přesnější zápis
3. vybere veškeré odkazy, které v atributu title obsahují text Foto
4. vybere všechny prvky (odkaz) s atributem title, jejichž hodnota obsahuje řetězec „Foto“.
5. vybere všechny prvky (odkaz) s atributem title, jejichž hodnota začíná na „Foto“.
6. vybere všechny prvky (odkaz) s atributem title, jejichž hodnota končí na „Foto“.

Upozorňuji, že záleží na velikosti písmen.

Ukázka – Selektory v CSS

Líbil se vám článek? Sdílejte jej prosím:
« starší příspěvky Novější příspěvky »

© 2024 Timesoft

Autor šablony Anders NorenNahoru ↑