[css] Leerzame stylesheet oplossingen

[Verwijderd]

Misschien is dit niks bijzonders hoor, maar ik vond van wel.
Als je naar de website van www.stopdesign.com kijkt of meer naar de source eigelijk. vind ik dat ze al heel ver zijn met css. Ik vond dit eigelijk wel een hele leerzame site/css. Er zitten technisch wel hele slimme dingen in en het ziet er in beide browsers (mozilla en ie) precies het zelfde uit.
Ze gebruiken in het stylesheet regelmatig: white-space:nowrap;
Iemand enig idee wat dat helpt voorkomen? of wat het doet?

Ik vond http://www.meyerweb.com/eric/css/edge/ ook wel vet maar daar zitten toch nog wel wat bugjes en verschillen in als je kijkt in verschillende browsers.

[Hangloozz]

ja da's precies wat Cheatah naleeft als je het mij vraagt
Ziet er wel netjes uit...
M'n eerstvolgende project moest ik maar eens zo aan gaan pakken

[Verwijderd]

Verwijderd schreef op 18 oktober 2002 @ 10:16:
Ze gebruiken in het stylesheet regelmatig: white-space:nowrap;
Iemand enig idee wat dat helpt voorkomen? of wat het doet?

whitespace: nowrap; betekent dat de automatische regelterugloop (wordwrap) ongedaan wordt gemaakt.

Als je bijvoorbeeld wilt forceren dat een zin op 1 regel blijft gebruik je dit. Zie ook de specs

Wired is trouwens ook een goed voorbeeld van CSS - No tables.

[Verwijderd]

het leuke van dit zulke pagina maken is dat je ook nog rekening mee kan houden hoe het geprint wordt. ik zag bij die Wired dat ze zelf een style media braille meegaven.

[Verwijderd]

t'ziet er inderdaad wel netjes uit, zo zou iedereen eens moeten gaan coderen!!!
Ben nu met een aantal projecten bezig die netheid vereisen, ik kan er dus ook nog wat van leren;-)
Dat zouden meer mensen moeten doen:-)

[Limhes]

Nou, als ik zo de broncode eens doorkijk, zie ik toch eea. wat me niet echt aanstaat:

code:

<img ... width="241" height="35" ... />
<strong>Home</strong>

Ik bedoel... het is wel valid XHTML, maar mooi is toch anders, niet?

[HunterPro]

Limhes schreef op 18 oktober 2002 @ 21:06:
Nou, als ik zo de broncode eens doorkijk, zie ik toch eea. wat me niet echt aanstaat:

code:

<img ... width="241" height="35" ... />
<strong>Home</strong>

Ik bedoel... het is wel valid XHTML, maar mooi is toch anders, niet?

kun je mij vertellen wat het probleem hiermee is?
De width en height worden aangegeven om backwards compatible te zijn, en <strong> is toch écht een valid XHTML tag, en nog in de juiste context geplaatst ook

[Limhes]

|HunterPro| schreef op 18 oktober 2002 @ 21:19:
De width en height worden aangegeven om backwards compatible te zijn...

Vind ik een vage reden. Het betreffende plaatje wordt standaard gerenderd op die afmeting (dus ook zonder width en height), dus waarom zou je de pagina in dit geval wel backwards compatible moeten maken en bij de rest van de pagina niet? Er staan nl. veel dingen in die uberhaupt niet ondersteund worden door NS4- en IE5-.

...en <strong> is toch écht een valid XHTML tag, en nog in de juiste context geplaatst ook

De <strong> tag vind ik gewoon lelijk Kwestie van smaak dus... In het ene geval gebruik je <div> en <span> om verschillende stukken tekst op te maken, en totaal haaks op die methode ga je er grappen als <strong> en <q> enzo doorheen gebruiken.

[McVirusS]

Limhes schreef op 18 oktober 2002 @ 22:27:
Vind ik een vage reden. Het betreffende plaatje wordt standaard gerenderd op die afmeting (dus ook zonder width en height), dus waarom zou je de pagina in dit geval wel backwards compatible moeten maken en bij de rest van de pagina niet? Er staan nl. veel dingen in die uberhaupt niet ondersteund worden door NS4- en IE5-.

Daar is een hele goede reden voor; namelijk het opbouwen van de pagina gebeurd dan veel mooier. Als je niet zo'n hele snelle verbinding hebt 'weet' je browser bij het laden van de plaatjes nog niet hoe groot die plaatjes zijn en wat dus de positie van alle elementen ten opzichte van elkaar wordt. Wat je dan krijgt is dat tijdens het laden elementen gaan 'verspringen', erg hinderlijk vandaar dat het wel netjes is om een height en een width mee te geven (Mag dit dan niet meer volgens W3C specs? What 'bout alt-tags?).

[McVirusS]

Limhes schreef op 18 oktober 2002 @ 22:27:
De <strong> tag vind ik gewoon lelijk Kwestie van smaak dus... In het ene geval gebruik je <div> en <span> om verschillende stukken tekst op te maken, en totaal haaks op die methode ga je er grappen als <strong> en <q> enzo doorheen gebruiken.

Dus in plaats van <strong> zouden ze volgens jou <span style="font-weight: bold;"> moeten gebruiken? Volgens mij zijn tags als <strong>,<i>,<b>,<u> etc. nog gewoon onderdeel van xHTML/HTML4.01 specs en gelukkig maar anders zou de code onleesbaar worden denk ik (of in ieder geval een stuk groter ).

[McVirusS]

StopDesign is trouwens wel erg gaaf gedaan (Wired trouwens ook)...toch maar eens proberen of ik ook zo een site in elkaar kan zetten, wel gaaf . Misschien wordt het toch maar eens tijd om Netscape4.x gewoon niet meer te ondersteunen.

[T. van Beek]

Ik ben sinds kort erg bezig om mijn sites,
1. Overzichtelijk te schrijven, alles netjes te ordenen en alles goed definieren.
2. W3C standaard naleven, ben op dit moment een forum aan het maken op de W3C standaard, IE, Mozilla en Opera geven ze precies hetzelfde neer, echt cool!

[Verwijderd]

okee, zo hoor ik het graag!

What 'bout alt-tags? volgens mij moet dat 'title' worden inplaats van alt, maar kan ik ook fout hebben, zal het ff opzoeken. want alt werkt dus niet in mozilla, tittle ook niet trouwens

[Verwijderd]

McVirusS schreef op 19 oktober 2002 @ 00:39:

[nohtml]
Dus in plaats van <strong> zouden ze volgens jou <span style="font-weight: bold;"> moeten gebruiken? Volgens mij zijn tags als <strong>,<i>,<b>,<u> etc. nog gewoon onderdeel van xHTML/HTML4.01 specs en gelukkig maar anders zou de code onleesbaar worden denk ik (of in ieder geval een stuk groter ).
[/nohtml]

En daar is weer even ruimte voor discussie. u, i en b zijn tags die -terecht- niet terugkomen in XHTML 2.0. Ze zeggen namelijk wel iets over hoe een stuk tekst eruit moet zien, maar zeggen niet waarvoor het is, de context ontbreekt.

Juist strong is goed, en b niet. Immers, om aan te duiden dat iets moet worden benadrukt, zijn er meerdere methoden beschikbaar. De standaard in de meeste browsers is het bold maken van tekst. Je zou er echter ook voor kunen kiezen om alle letters te capitalizen. Of rood te maken, of whatever.

[McVirusS]

Hmm, ik denk dat ik beter begin te begrijpen wat je bedoelt Cheatah. Het is een andere manier van denken, op zich wellicht betere manier. Als je CSS en tags gebruikt volgens jou denkwijze wordt je gedwongen tot meer consistentie. Via bijvoorbeeld <strong> tags geef je aan dat je iets wilt benadrukken en via CSS geef je aan op wat voor manier je dingen wilt benadrukken....intressante manier van werken . Of zie ik het nou verkeerd?

[muba]

McVirusS schreef op 19 oktober 2002 @ 00:46:
StopDesign is trouwens wel erg gaaf gedaan (Wired trouwens ook)...toch maar eens proberen of ik ook zo een site in elkaar kan zetten, wel gaaf . Misschien wordt het toch maar eens tijd om Netscape4.x gewoon niet meer te ondersteunen.

WRONG! Wat een foute actie... reken maar als je dat doet dat je toch aanzienlijk wat bezoekers kwijt bent... ikzelf gebruik Opera, die kan je instellen om zich te identifiiceren als verschillende browsers (MSIE, NS, Opera, Mozilla etc), en als je m instelt als MSIE dan ondersteunt hij ook de .index en .all dingen van JavaScript, die dus alleen door MSIE gebruikt worden maar officieel geen onderdeel VAN Javascript zijn... maar toch vind ik dat als iemand niet gewoon de moeite wil nemen een *fatsoenlijke* site te bouwen, dan hoef ik hem al niet meer te zien...

Da's hetzelfde als dat een fabrikant voor jou een geweldige 100gig harde schijf maakt maar dat die om de een of andere reden niet gepartitioneerd kan worden of dat hij dusdanig breed is dat je hem niet in je kast kan inbouwen... de schijf *werkt* misschien wel, maar niet zoals het hoort.

[Verwijderd]

MUBA schreef op 19 oktober 2002 @ 11:24:

Da's hetzelfde als dat een fabrikant voor jou een geweldige 100gig harde schijf maakt maar dat die om de een of andere reden niet gepartitioneerd kan worden of dat hij dusdanig breed is dat je hem niet in je kast kan inbouwen... de schijf *werkt* misschien wel, maar niet zoals het hoort.

Dat is makkelijk praten, er is een bepaalde standaard voor de grootte van harddisks. Stel je eens voor dat die er niet was. Dan zouden computercase fabrikanten 10 soorten afstandhoudertjes en 50 schroefgaten moeten maken, zodat elke hdd erin gemonteerd kan worden.

[muba]

Dat is precies wat ik zeg: er is W3C, houdt je gezellig aan hun standaard, dan is iedereen tevreden

[Clay]

MUBA schreef op 19 oktober 2002 @ 11:24:
[...]


WRONG! Wat een foute actie... reken maar als je dat doet dat je toch aanzienlijk wat bezoekers kwijt bent... ikzelf gebruik Opera, die kan je instellen om zich te identifiiceren als verschillende browsers (MSIE, NS, Opera, Mozilla etc), en als je m instelt als MSIE dan ondersteunt hij ook de .index en .all dingen van JavaScript, die dus alleen door MSIE gebruikt worden maar officieel geen onderdeel VAN Javascript zijn... maar toch vind ik dat als iemand niet gewoon de moeite wil nemen een *fatsoenlijke* site te bouwen, dan hoef ik hem al niet meer te zien...

Da's hetzelfde als dat een fabrikant voor jou een geweldige 100gig harde schijf maakt maar dat die om de een of andere reden niet gepartitioneerd kan worden of dat hij dusdanig breed is dat je hem niet in je kast kan inbouwen... de schijf *werkt* misschien wel, maar niet zoals het hoort.

Je wil toch niet beweren dat je tot in alle eeuwigheid elke oude browser moet blijven ondersteunen? wie ondersteunt er nog bewust IE of NS 3? wat maakt versie 4 dan zoveel anders dat dat na > 5 jaar nog wel ondersteund moet worden? Als je dat doet leg je jezelf namelijk wel dermate grote beperkingen op dat praktisch alle ontwikkelingen in css en xhtml onbruikbaar worden, is dat voor spek en bonen ontwikkeld dan?

[muba]

Nee dat zeg ik ook niet. Maar McVirusS zei dat hij Netscape 4.x niet meer ging ondersteunen. Dat is in mijn ogen een verkeerd uitgangspunt. Je moet je gewoon (nouja moet, maar het is wel het beste) houden aan het door de W3C vastgestelde standaard. Als je dat doet, en als daardoor per ongeluk NS4.x niet meer mee kan komen, dan is dat jammer. Maar je moet niet gaan werken vanuit het oogpunt dat je je site dan maar geheel of grotendeels op MSIE moet gaan richten, want zo kwam het op mij in de eerste instantie over.

[Verwijderd]

MUBA schreef op 19 oktober 2002 @ 12:28:
[..]
Je moet je gewoon (nouja moet, maar het is wel het beste) houden aan het door de W3C vastgestelde standaard. Als je dat doet, en als daardoor per ongeluk NS4.x niet meer mee kan komen, dan is dat jammer.

Dat bedoelde hij waarschijnlijk ook, lijkt me
Er is maar een iemand die er misschien baat bij zou hebben om code zo te schrijven dat Netscape hem verkloot (ik noem geen namen)

[muba]

Billie? Nee 'k denk het niet, want hardcore netscape gebruikers zouden dan niet meer op microsoft's site kunnen komen en dat zouden ze toch niet willen? Niet voor niets bestaat hun site voor t grootste gedeelte uit server side scripts.

[crisp]

MUBA schreef op 19 oktober 2002 @ 11:24:
[...]


WRONG! Wat een foute actie... reken maar als je dat doet dat je toch aanzienlijk wat bezoekers kwijt bent...

NS4 mis je niet zoveel aan hoor. NS4 met zijn document.layers model en gebrekkige CSS ondersteuning is ook echt geen browser meer waar je op dit moment nog voor wilt ontwikkelen...

ikzelf gebruik Opera, die kan je instellen om zich te identifiiceren als verschillende browsers (MSIE, NS, Opera, Mozilla etc), en als je m instelt als MSIE dan ondersteunt hij ook de .index en .all dingen van JavaScript, die dus alleen door MSIE gebruikt worden maar officieel geen onderdeel VAN Javascript zijn...

Opera is al een browser die achterloopt op de ontwikkelingen, maar met de ondersteuning van document.all slaan ze imho echt de plank mis. Als je pretendeert de standaarden aan te houden dan bouw je toch niet een verouderd en niet-standaard document model in. Mozilla doet dat ook niet.
Opera is trouwens makkelijk te herkennen aangezien er altijd 'Opera' in de userAgent string staat, op welke manier hij zich ook identificeerd.
Browser-sniffing op de UA is trouwens ook niet zaligmakend, beter is gewoon te kijken of bepaalde methods ondersteund worden:

JavaScript:

if (document.getElementById) doSomething();

helaas gaat het dan weer fout in Opera die bijvoorbeeld true geeft op document.createElement, maar dat nog niet geimplementeerd heeft.

maar toch vind ik dat als iemand niet gewoon de moeite wil nemen een *fatsoenlijke* site te bouwen, dan hoef ik hem al niet meer te zien...

Wat heet fatsoenlijk? Natuurlijk dien je ervoor te zorgen dat je site toegankelijk is voor het bedoelde publiek, en dien je zoveel mogelijk standaarden te volgen. Of je een oude standaard volgt of een nieuwere hangt dus af van je publiek.

Het is een bewuste keuze, en als je gebruik maakt van nieuwe technieken die door sommige browsers (nog) niet goed ondersteund worden, dan zal je of een alternatief moeten aanbieden, of tegen je gebruikers moeten zeggen dat ze maar een andere browser moeten gebruiken.

Stilstand is achteruitgang zeg ik altijd maar, en als een browser fabrikant als bijvoorbeeld Opera niet mee kan komen met de nieuwste technieken, moeten wij webdesigners daar dan altijd maar rekening mee gaan houden terwijl er alternatieve browsers zijn (die ook nog eens gratis zijn) die die technieken wel ondersteunen?

[Verwijderd]

Er wordt hier maar 1 aspect besproken, en dat is hobby. Het andere aspect "de klant" wordt wederom weer niet in het achterhoofd gehouden.

[crisp]

Verwijderd schreef op 19 oktober 2002 @ 14:09:
Er wordt hier maar 1 aspect besproken, en dat is hobby. Het andere aspect "de klant" wordt wederom weer niet in het achterhoofd gehouden.

Jij bedoelt niet het aspect "klant", maar volgens mij meer het aspect "geld". Geld wat de klant bereid is aan een project te spenderen, en zodoende niet extra wenst te betalen voor bijvoorbeeld Netscape ondersteuning.

Op zich hoeft dat denk ik geen probleem te zijn; een beetje goede webdesigner kan in 1 keer wel een site bouwen die zowel in IE als in de moderne Netscape/Mozilla browsers werkt. Een statische site zal het dan vaak ook nog wel doen in Opera (met dynamische content wordt Opera al lastiger).

Dit soort mooie CSS2 toepassingen die dus eigenlijk alleen nog maar in Mozilla goed werken heb je toch al vaak niet nodig, en zijn inderdaad op dit moment alleen leuk voor hobbyisten en puristen.

Puur IE-only code proggen (omdat de klant het wilt) is echter in mijn ogen verkeerd omdat je in dezelfde tijd ook rekening kan houden met andere moderne browsers; anders doe je toch echt iets verkeerd of loop je qua kennis enorm achter.

[2]

Allereerst ben ik het absoluut met crisp eens wat betreft het, hoe zal ik het mooi noemen, trimmen van de backward-compatibility ?

Ik denk dat dit een discussie is waaruit enkel zijn conclusie getrokken kan worden. Het punt is natuurlijk dat men zogenaamd vanuit het kader "user centered design" rekening wilt houden met stokoude technologieen en browsers, terwijl gebruiksvriendelijkheid op een veel hoger niveau getrokken kan worden als je dat juist niet doet. Ik vind dat je de gebruiker daarin best wel mag leiden, of beschermen tegen zichzelf, hoe je het zien wilt.

crisp schreef op 19 oktober 2002 @ 14:28:
[...]

Dit soort mooie CSS2 toepassingen die dus eigenlijk alleen nog maar in Mozilla goed werken heb je toch al vaak niet nodig, en zijn inderdaad op dit moment alleen leuk voor hobbyisten en puristen.

Dit is op zich wel waar, maar als je meer je aandacht richt op iets ingewikkeldere applicaties, als management systeemen bijvoorbeeld, dan zijn dit functies die echt wel van pas komen. Bovendien schiet het natuurlijk niet op als je zo gaat denken; op dit moment worden de functies misschien nog niet zoveel toegepast, sommige zullen dat misschien nooit echt worden, maar het is allemaal onderdeel van de voortuigang.

[crisp]

2 schreef op 19 oktober 2002 @ 15:25:
[...]
Dit is op zich wel waar, maar als je meer je aandacht richt op iets ingewikkeldere applicaties, als management systeemen bijvoorbeeld, dan zijn dit functies die echt wel van pas komen. Bovendien schiet het natuurlijk niet op als je zo gaat denken; op dit moment worden de functies misschien nog niet zoveel toegepast, sommige zullen dat misschien nooit echt worden, maar het is allemaal onderdeel van de voortuigang.

Wat ik eigenlijk bedoelde was dat zolang de meestgebruikte browser van dit moment (IE) dit soort dingen nog niet geimplementeerd heeft het eigenlijk ondoenlijk is er gebruik van te maken buiten de hobby-sfeer, hoe handig dit soort functionaliteiten ook zijn.
IE begint wat dat betreft meer en meer achter te lopen op de ontwikkelingen (CSS2 is toch ook al enkele jaren oud).
Het schiet dus wel niet op om zo te denken, maar op dit moment moet je wel.
In het kader van de vooruitgang kan het echter geen kwaad om daar in je eigen tijd eens mee te experimenteren

* crisp zag ook het liefst dat alle browsers volledig CSS2 en DOM2 compliant waren en alle gebruikers die browsers ook gebruikten...

[Johnny]

Verwijderd schreef op 19 oktober 2002 @ 01:54:
okee, zo hoor ik het graag!

What 'bout alt-tags? volgens mij moet dat 'title' worden inplaats van alt, maar kan ik ook fout hebben, zal het ff opzoeken. want alt werkt dus niet in mozilla, tittle ook niet trouwens

Raar maar waar: ALT = verplicht, als je het niet doet krijg je een dikke vette Error van W3C.

Eigenlijk is het niet eens zo raar, het is vooral voor mensen met beperkte visuele eigenschappen (blinden & slechtzienden) die gebruik maken van een braille "ding" of een text browser met enorme hoogcontrast letters zodat ook zij weten wat er gebeurt als ze op het "plaatje" klikken. (Zij lezen dan: "Afbeelding: 'Post new topic'" in plaats van het plaatje "new topic" bovenaan deze pagina.

[crisp]

Johnny64 schreef op 19 oktober 2002 @ 22:20:
[...]


Raar maar waar: ALT = verplicht, als je het niet doet krijg je een dikke vette Error van W3C.

Eigenlijk is het niet eens zo raar, het is vooral voor mensen met beperkte visuele eigenschappen (blinden & slechtzienden) die gebruik maken van een braille "ding" of een text browser met enorme hoogcontrast letters zodat ook zij weten wat er gebeurt als ze op het "plaatje" klikken. (Zij lezen dan: "Afbeelding: 'Post new topic'" in plaats van het plaatje "new topic" bovenaan deze pagina.

ALt staat voor 'alternative'; dat wil dus zeggen dat die text gebruikt wordt als plaatjes niet weergegeven worden (uitgeschakeld / textbrowser).
Dat IE er ook tooltipjes van maakt is dus eigenlijk fout, daar is de title tag meer voor bedoelt. De title tag werkt trouwens ook bij andere elementen.