ugrás a tartalomhoz

Eric Meyer „Reset CSS”

zoliky · 2009. Május. 22. (P), 19.44
Sziasztok,
Eric Meyer oldalan talaltam egy hasznos kodot. Klikk ide!

A kodban vannak olyan elemek amelyeket nem hasznalok, peldaul: applet,object,b,u,i,center. Az ilyesmit erdemes benne hagyni? En szeretem ha tiszta a kod es tudom mit rakok bele a CSS fajlba (nem erdekel a copy & paste) csak inspiralom magamat! Es szerintem a "b,u,i,center" totalis hujeseg XHTML Strict alatt.. Az applet meg object-rol nem tudom mit mondjak, az igasag az, hogy nem hasznalok JAVA-t.

Koszonom!
 
1

Nem a kérdésedre válaszolnék,

ganyecz · 2009. Május. 22. (P), 20.25
Nem a kérdésedre válaszolnék, csak megjegyeznék valamit:
vertical-align: baseline;
...ez nekem okozott már kellemetlenségeket FF alatt táblázatoknál colspan/rowspan "kombókkal".
2

azt olvastam, hogy az

zoliky · 2009. Május. 22. (P), 20.30
azt olvastam, hogy az "outline: 0;"-nak sincs ertelme, de nem tudom eldonteni.. Esetleg valaki tudja miert van nullazva? azert, hogy ne tudjak billentyuzettel navigalni az oldalon (TAB gomb) ? ;))
3

olvasd el

gex · 2009. Május. 22. (P), 20.38
4

Majd ha találkozol valami

ganyecz · 2009. Május. 22. (P), 20.47
Majd ha találkozol valami ilyesmivel, akkor eldöntöd... :)
5

olvasd el a masodik

zoliky · 2009. Május. 22. (P), 23.24
olvasd el a masodik hozaszolast. Ertem mit csinal, de akarom tudni miert kell letiltani ?
9

Fordított gondolkodás

yaanno · 2009. Május. 23. (Szo), 10.48
Nem hogy kell, hanem nem szabad letiltani. Egy form vagy akár egy teljes dokumentum bejárásakor igen hasznos lehet, ha látod, melyik elemen "állsz". Ahogyan Ádám is említi alább, ez alapvetően segíti elő a használhatóságot.
10

a hasznalhatosagot milyen

zoliky · 2009. Május. 23. (Szo), 11.03
a hasznalhatosagot milyen ertelemben? Nem tudok billentyukel navigalni az oldalon ?
Azt hiszem, hogy csak a Firefox jeleniti meg az outline-t. Azt jelenti, hogy a masik browszerekbe nem is tudnek billentyukel navigalni ?
11

Hasznáhatóság

yaanno · 2009. Május. 23. (Szo), 11.30
Inkább arról van szó, hogy vizuális visszajelzést kap a felhasználó arról, hogy egy adott akciója (klikkelés, tabváltás stb.) eredményes volt-e, illetve hogy átlássa egy adott "munkafolyamat" esetén, hogy éppen hol tart.

Ez önmagában még nem lenne nagy kunszt, és akár tehetnénk rá, hiszen a cukiság a dizájn terén nagyon sokszor felülírja az egyéb szempontokat (használhatóság, hozzáférhetőség).

Nekem az a véleményem, hogy manapság, amikor szinte minden lényeges folyamat a felhasználó számára rejtetten (pl. ajax stb.) történik, igencsak jó lehet vizuális és egyéb visszajelzésekkel segíteni az illetőt. Nem szabad bizonytalanságban tartani az usert :)

Ajánlom figyelmedbe a Sitepoint nagyszerű referenciáját ebben a témában (is).
7

Blur

Adam · 2009. Május. 23. (Szo), 09.55
Igen, sajnos azért használják, mert "csúnya". Mint annó, amikor minden link-re rárakták az
onclick="this.blur();"
eventhandler-t.

Csakhogy ez a használhatóság rovására megy, amit sokan figyelmenkívűl hagynak!
6

"Hasznos" elemek és "reset.css"

Adam · 2009. Május. 23. (Szo), 09.52
Hát, én előszeretettel használom a b, u, i elemeket — szigorúan teljesen resetelve minden megjelenésüket —, mivel rövidebb őket leírni, mint a span-t, és semmi jelentéssel nem bírnak.

Például a mostani oldalon, ahol dolgozok, úgy van kialakítva a design, hogy a heading-eknek dupla top border van. Egy 2px-es, majd kihagyás, és megint egy 1px-es. Ekkor teljesen jól volt használható a
<h2><b/></h2>
Szóval csak bátran használni szerintem! Ráadásul Douglas Bowman is előszeretettel használta a gmail UI kialakításánál. Bővebben itt.

Amúgy ami a "reset.css"-eket illeti, szerintem nem éppen kifizetődő a használatuk, pláne ami az alap struktúrált szövegek stílusának törlésével ér el az ember (ul, ol, dl és tartozékaik)

Én a jelenlegi projektnél a következő CSS-t alkalmaztam csak, hogy egy általánosabb megjelenést érjek el:
html, body {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #000;
	font: normal 11px Arial, Helvetica, Tahoma, Verdana, sans-serif;
	/**
	 * Safari3 text anti-alias javitas [Adam]
	 */
		text-shadow: rgba(0, 0, 0, 0.01) 0 0 0;
}

input, select, textarea, button {
	vertical-align: middle;
	margin: 0;
	color: #000;
	font: normal 11px Arial, Helvetica, Tahoma, Verdana, sans-serif;
	/**
	 * Safari3 text anti-alias javitas [Adam]
	 */
		text-shadow: rgba(0, 0, 0, 0.01) 0 0 0;
}

a {
	cursor: pointer;
	cursor: hand;
	text-decoration: none;
	color: #00f;
}

form, object, embed, noscript {
	margin: 0;
}

a img, img {
	border: 0;
}

img {
	display: -moz-inline-box;
	display: inline-block;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 11px;
	font-weight: normal;
	margin: 0;
}

b, u, i, cite {
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
}
8

Koszonom a valaszt! Azt

zoliky · 2009. Május. 23. (Szo), 10.29
Koszonom a valaszt! Azt hiszem, hogy tul perfekcionista vagyok ami szerintem rossz.

Szoval a lenyeg az, hogy mukodjon az oldal, ugye ? Egy olyan sminket epitek fel amelyet kesobb atadok valakinek es az lehet, hogy tovabb adja. Nem csak en akarom tudni mi van benne, hanem masok is.

Gondoltam hogy csinalok egy altalanos reszetet es ha akarnak kulombozo elemeket hasznalni a WYSIWYG szerkesztoben reszeteljek le ok kulon kulon. Azt hiszem, hogy egy sminket nem lehet megirni ugy, hogy minden szituaciora mukodjon!
12

én biztos más vagyok

sotetbarna · 2009. Május. 23. (Szo), 20.08
végigolvastam a hozzászólásokat, és arra jöttem rá, hogy én biztosan más vagyok.
ad 1, azzal kezdek minden tördelést, hogy benyomom a reset.css-t, mert annyira hasznosnak tartom.
nem gondolok arra, hogy firefoxban jó dolog az, hogy van outline. arra gondolok, hogy a kedves megrendelő (ha egyáltalán van firefox-a), meg fogja kérdezni, hogy miért van ott a szaggatott vonal? mondjuk igazából nem ő kérdezi meg először, mert először a designernek ugrik össze a szemöldöke. magyar rögvalóságban az outline-t nem értékeli olyan, aki pénzt ad a munkáért. márpedig mindig annak van igaza, aki a pénzt adja. mindig. lehet győzködni, lehet próbálkozni, de... de mindig a megrendelőnek van igaza.
kicsit már ez a usability meg accesibility kezd olyan lenni, hogy az übergeekség kritériuma, hogy naponta háromszor el kell mondani, meg megértően össze kell kacsintani az átlag user fölött "áhh, ezek úgyse értik". hát úgy nagyjából nem is.
most ha nagyon kekec lennék, feltenném a kérdést, hogy akkor miért is kellene a világ összes webprogramozójának szívnia csak azért, hogy a usabilty és az accessibility szent grálként emelkedhessen fölénk? miért nem csak pölö a screen readerek írói szívnak? most mindenki világszinten ezermillió munkaórát beleöl, holott lehet, hogy másoknak csak ezret kellene.
de nem vagyok kekec.

és a "b,u,i,center" nem totális hülyeség, mert lehet olyan editor, ami engedi a usernek beletenni a feltöltendő tartalomba (ha máshogy nem, hát forráskód üzemmódban). mert a usernek a szerkesztést megtiltani nem lehet...
13

te is más vagy, te sem vagy más

yaanno · 2009. Május. 23. (Szo), 23.47
azzal kezdek minden tördelést, hogy benyomom a reset.css-t, mert annyira hasznosnak tartom

Szíved joga :) Nyilvánvaló előnyökkel jár egy ilyen eszköz használata, mivel normalizálja a computed style-t. Ezt szerintem senki nem kérdőjelezte meg. Egyébként Eric is azt írta, hogy nem szabad ész nélkül használni ezt a css-t, csak azokat a részeket, amire szükség van.
nem gondolok arra, hogy firefoxban jó dolog az, hogy van outline

Az internet explorer kivételével mindenütt támogatott az outline. Szerintem a linkek esetében az outline törlése még elmegy, de formoknál kifejezetten előnytelen; próbálj megmutatni az ügyfelednek egy fókuszált textareát, amin outline van és egy olyat, amin nincs. Szvsz az előbbit fogja szeretni.
miért is kellene a világ összes webprogramozójának szívnia csak azért, hogy a usabilty és az accessibility szent grálként emelkedhessen fölénk?

Szerencsére a világ programozói éppen nem ezt a trendet követik. A miértre nem tudok jobbat mondani ennél. A dizájnerek és a menedzserek is kezdik felfogni a dolgot.
Másrészt a fejlesztői hanyagság miatt nem a screen readerek programozói szívnak, hanem a felhasználók.
15

még egy kicsit kekeckedek

sotetbarna · 2009. Május. 24. (V), 13.28
Másrészt a fejlesztői hanyagság miatt nem a screen readerek programozói szívnak, hanem a felhasználók.

van valakinek konkrét számadata arról, hogy ma Magyarországon hányan használnak screen readert? vásárlóerőben a piac hány százalékát képviselik?

félreértés ne essék, nem vagyok kirekesztő (tudom, hogy azt a látszatot keltem). csak kíváncsi. és kekec :)
19

Ne kekeckedj, olvass

yaanno · 2009. Május. 26. (K), 11.07
Ha kekeckedni szeretnél, a Weblabor nem jó terep ehhez szerintem. De csak tipp.
ma Magyarországon hányan használnak screen readert?

A forgalmazók tudnának számokat mondani ezzel kapcsolatban. A 2001-es népszámlálás alapján mintegy 580.000 fogyatékkal élő van Magyarországon, ebből 83.000 vak/gyengénlátó. Ezt csak azért emeltem ki, mert valamiért azt gondolják a fejlesztők, hogy az akadálymentesség = vakbarátság, pedig nem. További adatokat itt találhatsz.

A linkelt táblázatban láthatsz gazdasági aktivitást, ami elkeserítő (bár ez nem ide tartozik). Mindent összevetve ha csak a foglalkoztatottak jelentik a potenciális vásárlóerőt, akkor ez a teljes szám mintegy 10%-a, kb. 58.000 ember.

Ebből persze le lehet vonni azt a következtetést, hogy a népesség 0.6%-a kedvéért nem érdemes "vacakolni". Én ebből inkább azt a következtetést vonom le, hogy azért érdemes, mert egyrészt ezzel növelhetem a potenciális vásárlóim körét, másrészt tettem valamit piaci szereplőként azért, hogy a cégem nem egyszerű pénzszivattyúként működik a gazdaságban (ez is messzire vezet tudom).

Még csak annyi, hogy Magyarországról beszéltünk csupán. Néhány évvel ezelőtt írtam egy kis összefoglalót, abban vannak nemzetközi összegzések is. Ha csak a hardcore számok érdekelnek, az ENSZ-nek vannak - többé-kevésbé hiányos - adatai.
14

Usability/accessibility vs megrendelő vs látogató

Adam · 2009. Május. 24. (V), 11.59
A reset.css-t használd nyugodtan, senki sem azt állította, hogy nem jó. Én annyit állítottam, hogy felesleges sok esetben a teljes css-t 1/1 alkalmazni, mert nagy része árván fog ott állni, és soha nem lesz "dolga".

...mondjuk igazából nem ő kérdezi meg először, mert először a designernek ugrik össze a szemöldöke...

A designernek pedig meg kell értenie, hogy a grafika felé emelkedik a tartalom és a használhatóság már. Hiszen kit érdekel, hogy zenél, ugrál és pörög, ha egyszerűen a felhasználó — ha információszolgáltató oldalról van szó és nem egy zenélő-ugráló-pörgő oldalról — nem találja meg azt, amit szeretne.

Életpélda 1: én ha egy weboldalt meglátogatok és elkezd zenélni, akkor ha 2mp-n belül nem találom meg a mute gombot, egyszerűen bezárom.

Életpélda 2: ha egy oldalon nagyon érdekel is valami tartalom, amit csak regisztráció után lehet elérni, rendben, beregisztrálok érte, HA a regisztrációnál pl tudom használni a TAB-ot, mert nem szeretek a 80 mezőn végigkattintani. Ha annyira mégsem fontos az a tartalom, nem szívok vele.

A mai fejlesztőkkel pedig az a baj, hogy túlságosan egységsugárként kezelik a megrendelőt. Manapság minden web-es fórumon csak azt lehet olvasni, hogy ennyire meg annyira idióta, hogy nem ért meg semmit, stb. Érdekes, nekem eddig mindig sikerült megmagyaráznom a megrendelőknek, hogy ezt és azt miért így vagy úgy kell megcsinálni, vagy úgy lett megcsinálva.

...márpedig mindig annak van igaza, aki a pénzt adja...

Egyszerűen megérti a megrendelő, hogy ha követ az oldala — amiért sokat fizetett — bizonyos szabályokat, akkor az az összeg sokkal hamarabb visszajön neki az oldalát látogatói zsebéből, hiszen könnyebben tudják használni. És nem csak könnyebben, de többen is, hiszen a korlátokkal élőket is megcélozza majd. Hiszen a gyengén látóknak is szüksége van például borotvára, bármi más használati eszközre, vagy valami netes szolgáltatásra.
Szóval nem onnan kell megközelíteni, hogy ki fizet a weboldalért neked, hanem hogy neki honnan fog az a pénz visszajönni. És az a látogató!

nem gondolok arra, hogy firefoxban jó dolog az

Márpedig miért pont a Firefox használókra nem kellene gondolni? Egyrészről 20-25% körüli a piaci részesedése, másrészről pedig ugyanolyan potenciális látogatók/vásárlók, mint az Internet Explorer használók. Vagy akkor én értelmezem rosszul a te munkamorálodat, és csak arra csinálod meg az oldalt, amiben a megrendelő nézi majd meg? Na szerintem ez a teljesen rossz megközelítése a webfejlesztésnek! Pláne ha azt üzletszerű hivatásként csinálja valaki.

Hasonló probléma — bár csak 2-5% körüli —, hogy sok oldal egyáltalán nem használható javascript és/vagy Flash Player megléte nélkül. Ezek csak kiegészítő funkciókat szabadna, hogy biztosítsanak, nem pedig egy teljes információszolgáltató oldal működését biztosítani. Hogy megéri-e a belefeccölt energia? Ha naponta 1 millió látogatód van, akkor ez napi 20-50 ezer elfelejtett potenciális vásárló. Ha az oldalad látogatóinak 1-2%-a vásáról csak átlagban 1000 Forintért, azaz generál bevételt, akkor ez napi 200-500 ezer Forintos bevételkiesés. Szerinted megéri kifizetni a megrendelőnek azt a plusz akár fél millió forintot, ami egy-két nap alatt visszahozza az árát, és utána csak növeli a bevételt? Szerintem meg fogja győzni!

mert a usernek a szerkesztést megtiltani nem lehet...

Ez a megfogalmazás csak akkor igaz, ha a tartalmat a felhasználók szerkesztik. Nem hinném, hogy a nasa.gov-on bármit is szerkeszthetnél.

lehet olyan editor, ami engedi a usernek beletenni a feltöltendő tartalomba

Ha pedig editort adunk a usereknek, akkor utána az editor által generált kódot mi magunk át is alakíthatjuk (b elemek strongra cserélése, stb.), ráadásul amennyire mostanában tapasztaltam, egyedül az Internet Explorer az, ami designMode-ban még b, i, u tag-eket szúr be, és nem span elemeket stílussal "megáldva". Ellenben az egy szeparált környezet, amire nem az oldal stíluslapját kell alkalmazni, hanem külön a szerkesztésre deklaráltat.

ha máshogy nem, hát forráskód üzemmódban

Azt le is lehet tiltani, hiszen az átlag user "ne értsen" a HTML-hez. Ellenben akkor forráskód üzemmódban engeded, hogy script-et szúrjon be? Nem hinném!
16

kontra

sotetbarna · 2009. Május. 24. (V), 13.48
A designernek pedig meg kell értenie, hogy a grafika felé emelkedik a tartalom és a használhatóság már.

ezt konkrétan nem így látom. az igényes grafika, az fogalom, az egy márkanévvel felér. a piac szereplőjének értékmérője, ugyanis a jó design nagyon drága. és nagyon sok esetben ez különbözteti meg az oldalakat egymástól, a konkurenciától.
nem onnan kell megközelíteni, hogy ki fizet a weboldalért neked, hanem hogy neki honnan fog az a pénz visszajönni. És az a látogató!

hátpersze, ez így van. na de nem én vagyok az a marketinges, akinek ki kell találnia, hogy milyen formában tálalja a tartalmat. én elkészítek egy eszközt az igényei alapján, egy honlapot. az ő dolga, hogy abból bevételt teremtsen. elmondom a véleményem, de azt csinálom, amit mondanak.
én értelmezem rosszul a te munkamorálodat

teljesen rosszul értelmezed a munkamorálom
sok oldal egyáltalán nem használható javascript és/vagy Flash Player megléte nélkül

ez így nagyon tág kör ám. mert ha a keresőrobotok bejárják az oldalt, normális a linkelés, a menü, a galéria stb, akkor nyugodt szívvel használok javascriptet meg flasht is, ha kell - seo szempontból legyen jó az oldal. és nem zavar, hogy van pár hülyegyerek, aki kikapcsolja a javascriptet böngészés közben. az már az überübergeek. :)
Ellenben akkor forráskód üzemmódban engeded, hogy script-et szúrjon be? Nem hinném!

válasszuk ezt egy kicsit szét, hogy ne kelljen már engem magas lóról hülyének nézni. vannak a látogatók által bevitt adatok, pl. hozzászólás, regisztráció. nem erről beszéltem, hanem az ügyfél által a saját oldalába feltöltött adatokról. ha ő oda szkriptet szúr be, hát szúrjon. majd kijavítom, ha elbaltázott valamit. és még el is magyarázom, hogy hogyan használja legközelebb. fizet érte, nem?
17

grafika != webdesign

Török Gábor · 2009. Május. 24. (V), 14.53
ezt konkrétan nem így látom. az igényes grafika, az fogalom, az egy márkanévvel felér. a piac szereplőjének értékmérője, ugyanis a jó design nagyon drága. és nagyon sok esetben ez különbözteti meg az oldalakat egymástól, a konkurenciától.

Ezt senki nem vonta kétségbe. A hangsúly inkább azon van, hogy webdesignerek nagy százaléka nem ért a webhez, és amit kiadnak a kezök közül, az lehet elsőrangú, precíz grafikai termék, csak éppen a weben használhatatlan. A web nem egy nyomtatott prospektus, hanem egy sokféleképpen használható, sokféle eszközzel elérhető funkcionális valami, aminek nem a célja nem a grafika kell hogy legyen, az csupán eszköz ahhoz.

hátpersze, ez így van. na de nem én vagyok az a marketinges, akinek ki kell találnia, hogy milyen formában tálalja a tartalmat.

Ebben igazad van. Viszont a marketingesnek te tudod megmondani, hogy meddig mehet el, te vagy birtokában a platform ismeretének mélységében, de mondhatod meg, hogy mit lehet és mit nem weben. És ezen a behatárolt játszótéren már szabadon garázdálkodhat a marketinges.
18

helyesbítek

sotetbarna · 2009. Május. 24. (V), 15.23
ezt konkrétan nem így látom. az igényes webdesign, az fogalom, az egy márkanévvel felér. a piac szereplőjének értékmérője, ugyanis a jó design nagyon drága. és nagyon sok esetben ez különbözteti meg az oldalakat egymástól, a konkurenciától.
20

Safari

carstepPCE · 2009. Május. 26. (K), 12.57
Udv,

talan nem ide tartozik, de egy kerdesem lenne, hogy safariban a legordulo menure miert nem lehet tabulatorral fokuszt tenni? Usability szempontbol ez nagyon gaz, erzesem szerint. Mivel nincs modomban Chrome alatt megnezni igaz ez chromra is, mivel az is Webkitet hasznal?

-cs-
Sanyi
21

Safari + Chrome + select

Poetro · 2009. Május. 26. (K), 13.21
select elemre lehet menni tabbal, alapból Chrome (narancs?)sárga, Safari pedig kék glow-val jelzi, hogy az lett az aktív elem, legalábbis Windows alatt.
22

Mac alatt...

Adam · 2009. Május. 27. (Sze), 08.59
...csak akkor, ha a System Preferences/Keyboard & Mouse/Keyboard Shortcuts alatt be van kapcsolva a "Full keyboard access: All controls", amennyire jól emlékszem.
23

koszi

carstepPCE · 2009. Május. 27. (Sze), 10.45
szia,

ezt mindjart le is tesztelem, mert kicsit furcsanak talaltam a viselkedeset :-)

szerk.: igen igy mar jol mukodik

-cs-
Sanyi