Posted: 08.01.2005 22:56 Post subject: CSS resursi - start here
Nakon svog (i ne samo svog, kako sam kasnije saznao) pothvata sa tableless mi3-jem prije dva tjedna dobio sam mnogo PM-ova čestitki (hvala svima) i (pogotovo) pitanja što se tiče CSS-a. Shvatio sam da ljudi koje CSS interesira malo više od onih koji ga pogledaju i odustanu zbog bugova u Internet Exploreru imaju problema sa pronalaženjem dobrih resursa na internetu gdje mogu dobiti n00b crash course introduction u CSS. Uz to, masa drugih koristi CSS samo za text styling i, zbog bugova u browserima, ne vjeruje da se site može napraviti kompletno u CSS-u a da se to drži u svim browserima koje ljudi danas koriste na Windowsima, open source platformama i Mackintosh-ima. Istina je da današnja podrška za CSS u browserima nije baš previše uzorna (imajte na umu da čak ni Firefox i Opera ne podržavaju neke stvari iz CSS level 2), ali to se naglo mijenja i za malo više od godinu dana, kad izlazi Longhorn, će velika većina ljudi imati čisto solidno (ili čak više od toga) standars-compliant user agent (UA), što bi značilo manje hackova za nas developere, a više podržanih advanced CSS tehnika za eksperimentiranje i osvajanje cura (chicks dig CSS)
Dakle, tko još ne zna CSS, a usudio se bez njega napraviti web stranicu u HTML-u... ovo je post za vas, a i za druge koji žele kompletno izbaciti sav nepotreban markup iz HTML-a, smanjiti veličinu fajlova (bandwidth!) za 60% i biti uzor ostalima kao web standards majstor.
Posted: 08.01.2005 22:57 Post subject: Introduction
Introduction
Potpuno user-friendly n00b intro u CSS možete pronaći na sljedećim sajtovima:
W3Schools je odlično mjesto za učenje web standarada. Opsežan introduction u CSS popraćen je odličnim CSS reference tablicama i interaktivnim demo-ima kojima se može vidjeti kako se nešto mijenja editiranjem CSS-a ravno na njihovom sajtu. "Best things in life are free"... ali sa mnogo marketinga sa strane i ispod. Neka vas to ne smeta.
Uvod u prejednostavnu sintaksu CSS-a (a i puno više) možete naći i na CSShark Answers FAQ;
W3C CSS Tutorial (opsežan, sa ružnim izborom boja... ali nećemo biti sitničavi ).
Westciv (Western Civilisation pty. ltd.) "web standards software and learning" je također odlično mjesto za učenje, no ne počinje skroz od početka... preporučam dakle da se prije prođu neki od gore navedenih tutoriala - kad imate basic znanje, trk na Westciv sajt izgleda mali, ali ima puno toga ("i otrov se u malim bočicama drži")
Interactive CSS Box Model demo (Flash required) - sjajna stvar ... CSS box model je najvažnija stvar u CSS-u, a ovaj demo pomaže da ga razumiju oni kojima specifikacija nije posve jasna
Što dalje? Ako niste odustali, nego vas (naprotiv) interesira: dobar programmer's editor je preduvjet. Bojanje sintakse i indentiranje je nešto bez čega se ne može - pustite neke da se hvale kako sve rade u notepadu; dogodit će vam se da napišete "backround-color:gray" i onda razbijate glavu pola sata zašto to ne radi prije nego što skužite typo. Isto tako sa indentiranjem - ako želite pregledan CSS file, u notepadu ćete razbiti TAB key. No point in that - nađite programmers editor u kojem možete pisati i HTML,CSS,JavaScript,PHP/ASP,SQL queries i ostalo, da se ne switchate između programa. Ja koristim jedan advanced open-source editor koji mi boji sintaksu u CSS-u tako sa vidim typo iz aviona - više od toga za CSS mi i ne treba.
CSS je web standard, zar ne? Vrijeme je da sad skoknete na nešto što ćete čitati puno i dugo - W3C (World Wide Web Consortium)specifikacije (sve se mogu, naravno, i downloadati u HTML-u ili PDF-u):
Na početku počnite sa CSS level 1 - specifikacija je malo starija i ne tako vizualno dotjerana kao naredne, ali ako odmah počnete čitati one druge bit će prenaporne i zatrpat će vas nerazumljivim informacijama.
Kad svladate (odnosno razumijete) sve iz level 1, u level 2 i level 2.1 ćete naći stvari koje čine CSS toliko kul. Level 2.1 je još uvijek "Candidate W3C Recommendation".
CSS Level 3 je još uvijek u fazi izrade, ali se, naravno, može pogledati kako do sada izgleda. Quote: "It includes all of level 2 and extends it with new selectors, fancy borders and backgrounds, vertical text, user interaction, speech and much more." kewl !!
HTML4.01 - smijat ćete se, ali da li znate sve? Prije niste morali paziti na semantiku, accessibility i slično; sad morate. Najvažnije je u svako vrijeme znati semantiku elemenata koje koristite i kako ćete ju iskoristiti za pisanje CSS-a.
Posted: 08.01.2005 22:58 Post subject: Intermediate
Intermediate
Nakon što ste naučili sve specifikacije napamet (kidding ) i znate osnove, službeno ste CSS Apprentice. Instalirali ste Web Developer Toolbar u Firefox (inače, većina vas ima ver 0.8 sa Mozilla update-a, posljednja verzija je 0.92 na homepageu) ili nabavili Operu, surfate internetom i grozite se nad golemim almost-trash sajtovima koji se učitavaju godinama (ako nemate još DSL/kabelski), na chatu uletavate curama sa CSS spikom, a kad ste živčani i pod stresom umjesto cigareta posežete za specifikacijom i naučite nešto novo i ultra kul. Sada vam treba malo motivacije:
Svi znamo za CSS Zen Garden (znamo li? ). Treba li vam još motivacije?? Jedan HTML - stotine CSS-ova... i to ne bilo kakvih: predivnih, zapanjujućih CSS-ova. To hell with tables
Neki sjajno dizajnirani, neki odličnog sadržaja, a neki oboje, pure 100% CSS web resource sajtovi:
AListApart (najbolji članci o web developmentu), Stopdesign (wow ), Stylegala (linkovi na druge dobro dizajnirane i standards-driven sajtove), Simplebits, Mezzoblue, WaSP (The Web Standards Project - odlični resursi)
Whoa, za ovaj nisam ni znao kad sam prvi put pisao: JAKO dobar 456 Berea Street
Kao što ja ovdje navodim resurse, i drugi ih imaju (i to gotovo na svakom do sada polinkanom sajtu):
XHTML je 'the next generation HTML'. Zašto govorim o njemu? Jer je riječ o CSS-u, a kad radite sajtove 100% u CSS-u tada više ne trebate običan HTML, jer on definira mnoge atribute i tag-ove koji definiraju izgled sadržaja što vam više uopće ne treba. Kada prijeđete na CSS, odmah prijeđite i na XHTML 1.0 (strict, po mogućnosti). Saznat ćete više na:
ALA: Better Living Through XHTML - quote: "XHTML is the standard markup language for web documents and the successor to HTML 4. A mixture of classic (HTML) and cutting–edge (XML), this hybrid language looks and works much like HTML but is based on XML, the web’s “super” markup language, and brings web pages many of XML’s benefits, as enumerated by the Online Style Guide of the Branch Libraries of The New York Public Library."
W3C list of valid DTDs (nas zanima "XHTML1.0 strict" DTD) - zapamtite da, kad pišete CSS, IE automatski pada u quirks mode ako se nešto nalazi ispred DOCTYPE deklaracije, što onemogućava HTML comments ili XML prolog prije iste. Baš je taj IE super. Na sreću, XML prolog za sad nije nužan (vidi niži quote)
Tantek's Minimal XHTML1.0 documents tests - testiranja svih kombinacija slanja (text/xhtml ili application/xhtml+xml, sa ili bez XML prologa) XHTML dokumenata (gosh I love IE)
The XML prologue IS optional, and DOES send IE into quirks mode; and when it's used in a document served as text/html, it's fairly useless since the document is not processed as XML, so it is ignored.
When served correctly as application/xhtml+xml, it must be inlcuded when the character encoding is not UTF-8 or UTF-16, but even then it is better to include it so that the document is fully self describing, and does not depend on a content-type header to set the charset.
Ian Hickson wrote:
The advantages of XHTML
When sent as application/xhtml+xml, XHTML has several advantages:
XHTML content will be able to be mixed-and-matched with content from other well-known namespaces (in particular, MathML). This is the main advantage for content authors.
UAs will immediately catch well-formedness errors
Tools interacting with XHTML documents are guaranteed a well-formed document.
XHTML content can be parsed with a simpler parser than tag soup can, and a _much_ simpler parser than SGML can.
However, none of these apply when an XHTML document is sent as text/html, and since authors feel their pages should be readable on the most popular Web browser, which does not support application/xhtml+xml, there is basically no point in using XHTML at the moment.
Character sets & encodings in HTML, XHTML & CSS - naučite već jednom te character encodinge... Jedno je kako je file sejvan, jedno je kako je poslan od servera (response headers) a jedno je što piše u meta tagu. To sve u principu treba biti isto. Sejvate li HTML sa hrvatskim znakovima kao iso-8859-1, šaljete ga kao windows-1250 a u meta tagu piše iso-8859-2... no good A takve si stvari neki bez znanja i dopuštaju
Mezzoblue: CSS Crib Sheet - malo opširniji savjeti kod kodiranja u (X)HTML/CSS-u... Svakako u bookmark!
Zapamtite da browseri imaju bugove! I da je u tome jedan daleko napredniji od ostalih Znači, ako nešto ne radi ne mora značiti da ste nešto krivo napisali. Ja ih izbjegavam, ali svi ćemo ih morati tu i tamo koristiti još neko vrijeme - CSS hackovi:
I drugi browseri imaju bugove. Gecko najgadniji (ako ih se može tako nazvati) su Rounding Error (podvrsta toga je Shifting Gaps n' Overlaps koji se može vidjeti na lijevoj, sidebar navigaciji Mozilla Update, a i drugdje - workaround je lagan) i bug koji se dešava u CSS layoutu kad browser dozna intrinsične veličine slika u IMG tagovima ali ne rastegne layout (Maratz blog) - workaround je više nego lagan i Maratz ga je opisao.
Last edited by Sulien on 14.09.2005 15:22; edited 5 times in total
Posted: 08.01.2005 23:00 Post subject: Hardcore CSS... oh yeah
Advanced / CSS layouts
The fun part... CSS layoutsa postoji jako mnogo, a tehnika ovisi o tome koliko kolumni sajt ima, da li je navigacija desno ili lijevo, gdje što dolazi u source-u... Osim layoutsa, tu ima i korisnih linkova kojima možete naučiti i neke druge kul stvari sa CSS-om - so, dig in!
Ružan, ali ultra koristan PositionIsEverything je "the ultimate resource" za kompleksne layoute koji se drže u svim modernim browserima među kojima su famozna 3-column "Piefecta" i "Perched Upon a Lily Pad"; browser bugove (pogotovo za IE) i razne workaroundove i hackove. Resursi su također sjajni.
Glish CSS layouts - ranije sam ga linkao, ali opet to činim: bogat site sa layoutima, resursima i svačime srodnim.
Eric Meyer's css/edge experiments: "A collection of cutting-edge CSS-driven design demos, created by yours truly as a way of showing just how far you can take CSS in a browser that fully supports it. Some pages may look a little weird in your browser, but that's to be expected when you're on the edge..." Morate pogledati - famozni "Complexspiral" i "Pure CSS menus" demo
ALA: Taming lists - odličan članak za sve koji žele lijepu navigaciju... JavaScript rollovers su out, CSS hover effects su in
La Chatte Noire - lab and testing area: transparent borders • table formatting (width) and table-width problems in IE Win • the "Clagnut tabs" reworked • a border and padding around an image • playing with listmarkers • CSS3 modules, overflow on body and html tags • Problems in Gecko based browsers • Problems in Apple's Safari browsers (and browsers based on the WebCore rendering engine) • Tab Key navigation • an accessible table • accessible "skip navigation" link
Moj najdraži Lorem Ipsum generator Pomaže kad radite CSS text formatting za site, a nemate previše teksta
...and lastly - Named Colours @ HTMLSource: "html+ colors color chart, with HEX codes", odnosno tablica imenovanih boja koje nisu u W3C specifikaciji, ali ih FF i IE implementiraju (a za druge ne znam).
Ako netko nađe broken link (ne bi smio), ne mora reportati na topic već bolje na PM. Da, mnogo ovih linkova je svojevremeno linkano sa mi3 - sad su na jednom mjestu, a ako netko hoće nadopuniti neka slobodno posta na topic... samo neka chat bude na minimumu. Hvala...
Svaka cast - stavio sam topic kao sticky!
Sva eventualna pitanja postavljajte u novi topic - sve postove osim nadopunjavanja resursa ćemo automatski moderirati (citaj: delete+kick/ban :)
Posted: 09.01.2005 13:36 Post subject: It's all about accessibility & usability
Accessibility / usability / semantics
Sajtovi u čistom CSS-u su više accessible. Sajtovi sa dobrom semantikom elemenata i slijedom u source-u su još više accessible... Ali web developer uvijek može biti još bolji i prezentirati željeni sadržaj još široj "publici". Hvala mi3 krew-u i ostalima za odlične linkove u newsima, i Marcu za dobre usability savjete po forumima
Fahrner Image Replacement (FIR), ekstenzivno korišten na CSS Zen Garden (i tone drugih stvari), nije više preporučen zbog otkrića da speech-synthesizeri ne čitaju tekst pod "display:none". O alternativnim, accessible metodama pročitajte u genijalnom opsežnom članku.
Navigation blindness - quote Zytzagoo: "Odličan članak o tome kako, kada i gdje smjestiti navigaciju, što govore istraživanja o toj temi, i još jedna potvrda činjenice da useri na site dolaze s ciljem, da se fokusiraju na sredinu ekrana i da je back button (ili njegov ekvivalent) najčešće korišten interface u browseru"
Imam iPAQ, pa zato: Targeting Small Screens @ Stopdesign... jer ako itko od vas napravi sajt na kojem ću ja morati horizontalno scrollati (kidding )
"Separate content from its presentation. Are They Really Separated?" Članak o tome kako to biva u praksi, ne samo u teoriji.
Zašto? Zato jer su ljudi toliko opsjednuti dizajnom, odnosno plitkim površinskim izgledom svega da zaboravljaju što prikazuju i što ljudi dolaze da vide, uporno uništavajući sadržaj prezentacijom oslanjajući se na to da će 'sve sjesti na svoje mjesto' na ekranu, a posljedica toga je ono što imamo danas na webu i 'trash' forum na dimitriju. I zato što se slijepa osoba ne može ni ulogirati na Iskon zbog neke reklame, a ne može ni saznati što se to reklamira - kakvog to ima smisla? OK, I'll shut up now...
Just be nice & make nice web.
LISTAMATIC - Can you take a simple list and use CSS to create radically different list options? The Listamatic shows the power of CSS when applied to a simple list.
LISTAMATIC 2 - Well, you asked for them. Nested lists! Choose from one of the growing number of samples or submit a list of your own.
LISTUTORIAL - Step by step tutorials on using CSS to create background image lists, rollover lists, nested lists and horizontal lists.
FLOATUTORIAL - Step by step tutorials on using CSS to create floating images, images with captions, next and back buttons, drop caps, inline lists and more.
SELECTUTORIAL - The structure of rules, the document tree, types of selectors and their uses. Plus a step by step tutorial using selectors to build a 3-column layout.
List-O-Rama will allow you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish. The code is automatically generated and inserted in your page. It can't get any easier than this.
Quirks mode je možda najlakši, ali treba dobro razmisliti da li zaista želite baciti browsere u quirks samo zbog nekih finesa kao što je npr. footer na dnu.
Ako želite zasnati više o quirks modu link se nalazi na ovom threadu pod "XHTML", 4. bullet.
Q: Ček, stani, kaj će mi to uopće?
A: Mr. Zeldman kaže, and I quote him from http://www.alistapart.com/stories/betterliving/ - Make a Date to Validate -- Validation takes just a few moments. If you don’t bother with this step, and if your XHTML or CSS contains errors, your site may not function properly. It may also look quite different than what you intended. With valid markup and CSS, compliant browsers tend to render your site as you expect, with exceptions to be discussed below. With invalid XHTML or CSS, all bets are off, and you can’t blame the browsers.
If you're working with the new version of Dreamweaver, you may be interested in a new book from SitePoint aimed at those who wish to build standards compliant sites.
Written by WaSP member Rachel Andrew of the Dreamweaver Task Force, and tech edited by Group Leader Molly E. Holzschlag, Build Your Own Standards Compliant Website Using Dreamweaver 8 is apparently everything you need to create standards compliant, accessible, cross-browser compatible websites with - you guessed it - Macromedia Dreamweaver 8.
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum