@font-face - přilepené ikony k následujícímu textu

radekt:
Zkus ikonám nastavit inline-block a nějaký rozumný rozměr, nebo přidat pravý margin/padding.

Co ale nechápu je, z jakého důvodu se ujala móda "textových" ikonek, které se mohou zobrazovat na různých zařízeních různě. Proč nepoužiješ klasické obrázkové ikonky, sdružené do krásného, maličkého spritu? Jeden HTTP požadavek, obrázek s téměř nulovým rozměrem. Místo toho načítáš font v X různých formátech, zbytečně. K tomuto fonty skutečně neslouží, tedy, neměly by sloužit.

Reaguji na radekta:
Zkusil bych ikonu napozicovat absolutně, aby neovlivňovala okolí, pokud to okolí má být vždy na pevném místě.

Různé starší mobily webfonty nepodporují vůbec.
V novém iOSu si uživatel může podporu webfontů vypnout.
A třeba proxy v mém zaměstnání WOFFy občas blokuje.
Ze všech těchto důvodů mi přijde naivní a škodlivé používat fonty na symboly…

anonymníí:
A obarvovat / zvětšovat / zmenšovat je budeš jak?
Půjde Ti s obrázkovým spritem to samé co s fontem?

Kcko:
Nedělá mi problém mít ikonku ve dvou velikostech a dvou barvách (nebo třech, to je jedno).

Raději volím cestu, která je datově méně náročná, spolehlivější a fungující vždy a všude. Nemusím spoléhat, že se mi načte nějaký webfont, že zrovna můj uživatelův prohlížeč jej bude interpretovat správně (tj. zejména, že zobrazí znak, který očekávám).

„Půjde Ti s obrázkovým spritem to samé co s fontem?“
A kolikrát jsi v praxi potřeboval dát ikonce stín, nebo ji za běhu měnit velikost (společně s tím, co jsem psal výše, a sice, že mi nedělá problém mít ikonku ve více variantách, které na webu využívám).

Jsem ze staré kodérské školy a místo, abych byl za cenu nefungování cool, volím raději staromódní způsoby a podporu co nejširší paletu koncových zařízení, tedy uživatelů. Jestli máš jiný přístup, OK, beru ho.

Kcko:
PS. pokud se budeš chystat rozepsat odpověď ve stylu, že měnit ikonky za běhu potřebuješ často, prosím o odkaz, kde plně využiji možností, které mi fontové ikonky nabízejí oproti ikonkám obrázkovým. Nemyslím generátor, myslím reálnou stránku, která buď prodává, nebo prezentuje nějakou firmu.

anonymníí:
A kolikrát jsi v praxi potřeboval dát ikonce stín, nebo ji za běhu měnit velikost (společně s tím, co jsem psal výše, a sice, že mi nedělá problém mít ikonku ve více variantách, které na webu využívám).
Momentálně dělám projekt, který má 20 podwebů, lišící se defakto jen barevností a samozřejmě barevností ikonek. Takže proto píši to co píši.


Tobě nedělá problém si něco přebarvit. Mě ano, stojí mě to zbytečný čas, který mohu věnovat nečemu jinému. Proč bych měl přebarvovat set ~70 ikonek?
Proč by to měl dělat grafik, když to není potřeba? Proč když na podstránce XYZ usoudíme, že ikony jsou malé a bude potřeba udělat větší tak se budou předělávat? Místo nastavení font-size?

Co takhle retina? Nic? Až za rok naskočí další rozlišení tak se to bude celé opět předělávat? @2 / @3 ... ?


Jsem ze staré kodérské školy

PS. Aplikaci Ti nepošlu, je to cloudová, uzavřená aplikace. Bohužel, snad si ovšem umíš představit o čem mluvím.
Bez komentáře, pokud Ti to vyhovuje prosím ... Já bych člověka, co se brání inovacím a zamrzl se starými leč osvědčenými (i když lze to takhle vůbec řici?) do firmy nechtěl ...

PPS2. Abysme se tady dál nebavili o ničem a nepřesvědčovali se navzájem, jsem člověk, kterému je jedno, že mi můj web nefunguje v IE 7, je mi fuk, že se mi font nenačte v nějakém starém mobilním prohlížeči apod. Je rok 2015, výrazně zpátky už se neohlížím.

PPS3. Chamurappi, nezapojuj se prosím ;-)-

Kcko:
„Já bych člověka, co se brání inovacím a zamrzl“

Dost vágní. Proto, že se někdo neřídí trendem používat font k něčemu, k čemu není určený, neznamená, že se brání inovacím. Třeba je jen pečlivěji zvažuje.

Analogicky by se na „Je rok 2015, výrazně zpátky už se neohlížím“ dalo říct, že bych nechtěl kodéra, který kašle na použitelnost. Ale to není zapotřebí, nikdo se tu na nic takového neptal, takže bych se zdržel podobných vět o zamrzání.

„Proč když na podstránce XYZ usoudíme, že ikony jsou malé a bude potřeba udělat větší tak se budou předělávat?“

Takže font má být berličkou pro lidi, kteří dohání malou pečlivost…

„Proč bych měl přebarvovat set ~70 ikonek?“

Ve sprite to může být otázka tří kliknutí v grafickém editoru.

„Proč by to měl dělat grafik, když to není potřeba?“

Takto se může zeptat kodér/programátor. Web je plný stránek tvořených kodéry a je to znát. K tomu není potřeba komentář.

Taurus:
Ve sprite to může být otázka tří kliknutí v grafickém editoru.
To jako myslíš vážně, že budeš dělat sprit ručně?

Analogicky by se na „Je rok 2015, výrazně zpátky už se neohlížím“ dalo říct, že bych nechtěl kodéra, který kašle na použitelnost. Ale to není zapotřebí, nikdo se tu na nic takového neptal, takže bych se zdržel podobných vět o zamrzání.

Použitelnost = používat staré řešení, jen proto, aby to fungovalo lidem, kteří používají staré nebo zastaralé / zastarávající prohlížeče / systémy?

Takže font má být berličkou pro lidi, kteří dohání malou pečlivost…
Pokud umíš plánovat tak, že v projektu už nepotřebuješ nikdy nic dodělat / předělat nebo se Ti podaří přemluvit klienta, který reaguje jinak na domluvené požadavky Tak Ti tleskám, praxe ukazuje často jinou pravdu. (A stále se motám kolem ikonek => požadavky na přebarvovaní, velikost, ostrost = retina)

Kcko:
„Použitelnost = používat staré řešení, jen proto, aby to fungovalo lidem, kteří používají staré nebo zastaralé / zastarávající prohlížeče / systémy?“
Kde je hranice, co je a není zastaralé? Kolik procent uživatelů jsi ochoten obětovat, aby použil nové řešení nefungující všude? Tobě bych nechtěl padnout do ruky ani jako kodér (zakládám si na použitelnosti), ani jako obchodník (okrádal bys mě o zákazníky).

Zkoumal jsi někdy, o kolik procent lidí na daném obchodě přicházíš? My třeba máme na jednom e-shopu skoro 7% lidí s IE7, necelé procento s IE6. Tito lidé normálně nakupují a nechávají v e-shopu peníze, které nemohou utratit jinde. I díky lidem, jako jsi ty.

„Pokud umíš plánovat tak, že v projektu už nepotřebuješ nikdy nic dodělat“
Nebylo to mířeno na mě, ale víceméně ano. Vím, co je potřeba a klienty s tím seznamuju. Změny se pochopitelně dělají, ale nevznikají nesmyslné požadavky, které by bránily tomu, abychom ikonky dělali v grafickém editoru, a ne je nahrazovali fontem.

Pokud se ti stává často, že musíš řešit s klienty zdánlivé drobnosti, které už měly být vyřešeny na úrovni grafického návrhu, pak je komunikace s nimi špatná. Neříkám, že jsi špatný obchodník/kodér/programátor, to soudit nechci (i když podle tvého pohledu na přístupnost si myslím své), ale klient musí ctít, že každá změna něco stojí. A pokud ji zaplatí, pak není důvod to neudělat pořádně.

Schválně, řekl jsi někdy klientovi celou pravdu, a sice, že používáš nejmodernější technologie (což všichni kvitují), ale výměnou za klientovy zákazníky? Tvoji zákazníci to nejsou, tvoje peníze taky ne. Ale tenhle přístup se mi prostě nelíbí.

Kcko:
Ad sprite: No nikdo jiný to za mě neudělá. Když už jsem ikony v editoru nakreslil, tak je spolu i libovolně překreslím/exportuju. Nevidím v tom nic zvláštního.

Definice použitelnosti zní trochu jinak.

Ad změny v projektu: Už napsal anonymníí. Ano, chápu, že takto šetříš zákazníkovi peníze. Pokud mu ale dobře fungují závity, musí předpokládat, že změny po realizaci něco stojí. Nebudu kvůli němu přesouvat kompetence a způsoby návrhu.

Taurus:
Ad sprite: No nikdo jiný to za mě neudělá. Když už jsem ikony v editoru nakreslil, tak je spolu i libovolně překreslím/exportuju. Nevidím v tom nic zvláštního.

Ale ano, udělá. Existují totiž task managery / preprocesory, které tuto práci odvedou rozhodně lépe a rychleji než ty.
Když budu chtít sprite jinak (horizontalní / vertikální / diagoální / smart), tak Ti budu psát? Když budu chtít zvětšit rozestupy mezi jednotlivými ikonami, tak Ti budu psát? Dodáš mi to za 10 minut, za 2 hodiny, večer, zítra, za týden? Díky nechci.


Nebudu kvůli němu přesouvat kompetence a způsoby návrhu.
Kolik zakázek pro velké klienty jsi už vyrobil? S kolika vrcholovými manažery / manažerkami / zadavateli jsi se setkal, že si můžeš dovolit tvrdit to co tvrdíš. Že ty pan grafik nebudeš něco měnit a přesouvat.


anonymníí:
Kde je hranice, co je a není zastaralé?
Já ji vidím tam, kde lze něco stejného udělat několika způsoby lišícími se v datu "objevení".
Např. v majtrjošce hacku (měl by si vědět co to je). Beru to už jako zastaralý způsob, když máme box-sizing. Pokud bych dělal web kde by majoritní nebo alespoň poměrná část používala IE 7 tak to vyřadím, ale díky bohu nedělám weby, kde by toto bylo nutné a můžu si dovolit se na IE 7 vykašlat.


Zkoumal jsi někdy, o kolik procent lidí na daném obchodě přicházíš? My třeba máme na jednom e-shopu skoro 7% lidí s IE7, necelé procento s IE6. Tito lidé normálně nakupují a nechávají v e-shopu peníze, které nemohou utratit jinde. I díky lidem, jako jsi ty.

Ne. Od toho totiž programátor / kodér není.

My třeba máme na jednom e-shopu skoro 7% lidí s IE7, necelé procento s IE6. Tito lidé normálně nakupují a nechávají v e-shopu peníze, které nemohou utratit jinde. I díky lidem, jako jsi ty

Vidíš, tak máš díky mě lepší byznys, není to skvělé? A věř tomu, že kdyby na mém webu něco just chtěli a byli limitováni omezením browseru, tak se holt přepnou do jiného nebo půjdou na jiný PC / zařízení. Tak bych to udělal i já, pokud bych o to hodně stál.
Špatný argument.

Pokud se ti stává často, že musíš řešit s klienty zdánlivé drobnosti, které už měly být vyřešeny na úrovni grafického návrhu, pak je komunikace s nimi špatná.
Ano, ale klient je klient a pokud to je klient, který generuje zisk (dlouhodobě) nebo do budoucna generovat bude, tak se s ním holt komunikovat bude a defakto se bude tancovat jak on bude pískat (samozřejmě řečeno obrazně a vše má svou mez).
Nebo by nám mohl Taurus prozradit kde ve zlatých stránkách najdeme klienty s dobrými mozkovými závity ;].

Neříkám, že jsi špatný obchodník/kodér/programátor, to soudit nechci (i když podle tvého pohledu na přístupnost si myslím své)
Myslet si můžeš co chceš, první je uspokojit klienta a majoritní část (čti poměrnou většinu uživatelů na webu), to ostatní je druhořadé.

Schválně, řekl jsi někdy klientovi celou pravdu, a sice, že používáš nejmodernější technologie (což všichni kvitují), ale výměnou za klientovy zákazníky? Tvoji zákazníci to nejsou, tvoje peníze taky ne. Ale tenhle přístup se mi prostě nelíbí.
Ano řekl, dokonce to máme napsáno ve smlouvě, podpora od IE8+ s částečnou grafickou degradací (CSS3). To že se mu nezobrazí ikonka PDFka u odkazu stáhnout PDF neberu jako katastrofu (viz nezobrazení fontů vs sprity), nebo že nemá kulaté rožky nebo stíny u elementů.

Budeme to ještě nějak dál pitvat a probírat? Reagovat budu případně až zítra. Zatím.

Už jsem se k tomu vyjadřovat nechtěl, nicméně...

Kcko:
„Ne. Od toho totiž programátor / kodér není“
To mi ještě vysvětli. Kdo je dle tebe zodpovědný za to, že klientovi nepustíš určité procento (a dle mého příkladu klidně i velké procento) lidí na web?

Majitel e-shopu tu jistě není od toho, aby věděl, co lidé používají, že jde jednu a tutéž věc udělat na webu správně (zpřístupnist obsah všem), nebo ji zfušovat (odmítnout "zastaralé" lidi). Nemá ani možnost si to pořádně zkontrolovat. Kdo pak je tím prvkem, který řekne: „Dodáme to tak, aby se zobrazil 99% lidí“, nebo „Je mi líto, ale 8% lidí se to nezobrazí, protože jsme cool a bohužel“... Upozorňuješ na to, kolik lidí je IE7? Myslím si, že ne.

anonymníí:
Tak ano; je, ale rozhodně to není až ten poslední článek, který to všecko "schytá" a bude o tom rozhodovat. Webová aplikace má procházet nějakým procesem. A celý tento proces není v duelu klient x kodér/programátor.

Schůzka s klientem, sběr požadavků => analýza řešení => wireframes => grafický návrh => prezentace klientovi => kódovaní => nasazování šablon => plnění obsahem => testování => oprava chyb => spuštění.

Minimálně by to mělo být tak že by to mělo být v jedné "symbioze" či jak to nazvat. Pokud bude chtít klient ultra moderní web a zároveň řekne, že chce podporovat X let staré IE, tak mu musí být vysvětleno, že to nelze, nebo že ho to bude stát majlant (prozkoumat alternativní řešení, pollyfily, a dát to všechno do kupy, což ale mnohy ani nejde a proto to třeba ani neděláme, žádné peníze za ty nervy a zbytečnou práci navíc nestojí).

Můžeš mi ten e-shop ukázat?

Kcko:
„které tuto práci odvedou rozhodně lépe a rychleji“
Rychleji možná, to druhé si nech od cesty, už jsem to psal jednou.

„ty pan grafik nebudeš něco měnit a přesouvat.“
Tím jsem myslel, že nebudu kvůli zákazníkovi přesouvat zodpovědnost za grafiku na kodéra. I to jsem už psal.

„Když budu chtít sprite jinak“
Domlouvej se se svým grafikem, pro mě, za mě, třeba desetkrát.

Mimochodem, na pixel perfect grafiku může ten awesome font zapomenout.

Taurus:
Rychleji možná, to druhé si nech od cesty, už jsem to psal jednou.
Nevidím důvod, vnímáš svoje schopnosti jako lepší, než by to za tebe udělal prověřený skript? Zajímavé.

Domlouvej se se svým grafikem, pro mě, za mě, třeba desetkrát.
Ano, tak to většinou bývá, s lidmi kolem projektu se komunikuje vícekrát. Vznikají úpravy dohodnutých věci i nové požadavky, IMHO normální. Nevím proč být limitován grafikem.

Mimochodem, na pixel perfect grafiku může ten awesome font zapomenout.
Kde se bavím já o Awesome? Bavím se o fontu obecně.

Reaguji na Kcka:
„jsem člověk, kterému je jedno, že mi můj web nefunguje v IE 7“
Webfont by ti fungoval i v Exploreru 4. (Pravda, ne na :before.)

Měřil jsem před rokem, kolik lidí na celkem běžném desktopovém webu nemělo webfont načtený deset sekund po onloadu a vyšlo mi něco přes procento a půl. Netuším, co to je za lidi. Ty o nich něco víš? Stáčíš debatu směrem ke starým prohlížečům, ale těch rozhodně není tolik (a starý Explorer s webfontem problémy nemívá). Předpokládám, že budou na vině všelijaké proxy servery, nebo má prohlížeč špatnou náladu z nějakého kdovíjakého důvodu, nebo si uživatel nastavil (klidně zprostředkovaně) napevno fonty, které se mu líbí, nebo mu načtení zablokoval adblock…

Tvůj postoj je strčit hlavu do písku a předstírat, že tam venku jsou jen neškodné přízraky minulosti. Nejsou.
Chtěl bys vědět, kolika procentům mobilních brouzdalů teď nefungují webfonty, nebo ti přijde lepší doufat, že jich je málo a že brzo zmizí? Je rok 2015, ne 14. století…

„To jako myslíš vážně, že budeš dělat sprit ručně?“
Pokud na něj máš chytrý generátor, tak máš v podstatě všechny problémy vyřešené, ne? Prostě si vygeneruješ sprite nabarvený tak, jak potřebuješ, tak velký, jak potřebuješ, se symboly, které potřebuješ…

„Co takhle retina? Nic? Až za rok naskočí další rozlišení tak se to bude celé opět předělávat? @2 / @3 ... ?“
SVG. Navždy. Ikony přes webfonty jsou slepá větev vývoje… když ti jde o ty moderní trendy.

„Kolik zakázek pro velké klienty jsi už vyrobil?“
Přece si tu nebudete poměřovat, kdo má většího klienta :-)

Myslím, že je celkem jedno, jak hluboké má kdo zkušenosti, argumentace by měla být přenositelná bez autorit. A ta ekonomická rozvaha, že se něco někomu možná určitě nevyplatí, je při hledání ideálních řešení také celkem rušivá… a ani nevede k žádnému rozumnému vyústění, na to je to moc komplexní situace, nanejvýš si tu můžete s anonymníím navzájem pogratulovat k úspěšnému podnikání, které si ale nezávidíte. Zbytečné. Je tu technologie X a technologie Y, jedna má nevýhody A, B, C, druhá má nevýhody D, E, F… stačí, ne? Rozvádět místo toho úvahy, kdo by koho (ne)zaměstnal a co je (ne)profesionální, je zbytečně dramatické. Vás dva bych teda nezaměstnal, moc se hádáte a nekonstruktivně :-)

Chamurappi:
Máš pravdu jako vždy ;-) (bez ironie).
I s tím SVG, ale i tady jsou limity (opět v IE a určitém používání -> obrázek nebo obrázek na pozadí).

Nicméně nechtěl jsem tady tvrdit, že fonty jsou nejlepší, spíše jsem musel alespoň trošku napadnout jeho nepochopení proč je používat když máme sprity. Taurus se k tomu celkem zbytečně připojil a rozdráždil mě tvrzením, že sprity vygeneruje líp než program, a další úpravy spritu budou zaviset na něm samotném.

A co se týká generátoru, jak si představuješ, že by měl fungovat? V jakém jazyku, znáš nějaký takový?

Předpokládám, že budou na vině všelijaké proxy servery, nebo má prohlížeč špatnou náladu z nějakého kdovíjakého důvodu, nebo si uživatel nastavil (klidně zprostředkovaně) napevno fonty, které se mu líbí, nebo mu načtení zablokoval adblock…
Nevím, mně se to stalo za život jen jednou (na starém Samsungu se starým, s velmi starým Androidem, v Miniopeře).

Tvůj postoj je strčit hlavu do písku a předstírat, že tam venku jsou jen neškodné přízraky minulosti.
Rozlišuj prosím rozdíl mezi ignorací, kterou klientovi odůvodním a tím co ty říkáš, strčením hlavy do písku.

Vše.

Kcko:
„Taurus se k tomu celkem zbytečně připojil“

Zbytečné jsou tvé vágní informace a osobní napadání. Za rozdráždění si můžeš sám, navíc kdybys nededukoval z mých tvrzení kola od vozu…

Za font awesome si dosaď libovolný jiný font, tam mi to ujelo.

Taurus:
Dedukuji tak jak píšeš. Možná to příště lépe popiš nebo dolož důkazem tvrzení, že umíš sprity vygenerovat lépe než preprocesor, pak se nerozdráždím. Ujíždí Ti víc věcí a komunikovat v klidu taky neumíš, tak si nehraj na něco co nejsi.
PS. Odpovídat už nemusíš, je to zbytečné, topic vyrešen, osobní intervence si necháme na někdy jindy a někam jinam. Měj se.

Jen mě napadla taková blbost, nezkoušel jsem, jestli to funguje, a dvakrát hezké to taky není, ale co zkusit prostě něco jako <span class="icon-glass"></span>&nbsp; Bar</a> (nebo možná jen tu mezeru, bez  )?

Přijde mi, že kódem <span class="icon-glass"></span>Bar</a> se vlastně styluje neexistující nic, span, který neobsahuje ani mezeru, a zobrazení ikonky nalepené na následující text (nebo ho dokonce i překrývající) mi tím pádem přijde korektní. Nebo něco přehlížím?