[HTML, CSS] Mobile devices geen css geven

[Cubix]

Ik bekeek vandaag voor het eerst mijn website met mijn gsm (Nokia 6610i). Tot mijn schrik las hij ook de CSS file uit, waardoor er veel te veel info werd geladen.

De html-structuur van mijn site zit zo in elkaar dat browsers die geen CSS ondersteunen een logische, gestructureerde plain versie krijgen. (Volgens de standaarden dus ook).
Het CSS design is niet geschikt voor schermen met een resolutie lager dan 800x600.

Is er een nette manier om volgens de standaarden mobile devices te onthouden van de CSS file? Dat heb ik liever. Ook zou ik graag helemaal geen plaatjes willen doorgeven.


Ik heb flink gezocht naar dit probleem, maar kreeg meestal oplossingen in de zin van de CSS zelf wel geschikt maken. En browser detectie vind ik vies... Wat denken jullie?

[TeeDee]

Negeren mobile devices CSS files niet als je ze @import?

[BtM909]

Als je Nokia CSS ondersteunt, ondersteunt het dan ook:

Cascading Stylesheet:

<style type="text/css" media="handheld"></style>

[Verwijderd]

welke CSS file leest ie uit? als je media="all" bij je link opneemt, leest ie 'm uit ja, beperk je tot "screen"

[Genoil]

Met het media attribute van de link tag kun je idd al heel wat bereiken. Als je nog beter wilt uitzoeken wat bijvoorbeeld de schermafmetingen van een mobile device zijn, of de maximale grote van images of dat XHTML MP of CSS wel/niet ondersteunt wordt, (of etc. etc.), kun je misschien eens kijken naar WURFL

[ Voor 42% gewijzigd door Genoil op 18-01-2005 10:51 ]

[Cubix]

Bedankt voor de ideetjes!

Ik ga eens aan de slag met 'media='-settings. Ik begrijp nu ineens het belang. Dit was toch alleen wel CSS 2.0? Hopelijk wordt dit goed ondersteund door de verschillende browsers.

[BtM909]

Verwijderd schreef op dinsdag 18 januari 2005 @ 10:49:
welke CSS file leest ie uit? als je media="all" bij je link opneemt, leest ie 'm uit ja, beperk je tot "screen"

Klopt, maar TS wil ook nog specifiek dingen niet showen

[Verwijderd]

Is er een nette manier om volgens de standaarden mobile devices te onthouden van de CSS file?

volgens mij lees ik dat ie gewoon mobile devices geen css wil geven

HTML:

<link rel="stylesheet" href="/default.css" media="screen" type="text/css" /> <!-- alleen voor scherm -->
<link rel="stylesheet" href="/default.css" media="handheld" type="text/css" /><!-- evt speciale voor handheld -->

en ondersteuning: moeizaam, opera voor pockets ondersteunt media="handheld", ik geloof dat alle browsers wel "print" ondersteunen, opera doet ook "projection" voor fullscreen modus, wat FF en IE en Moz niet doen, "braille" en "aural" enzo: geen flauw idee, "tty": lynx zou het moeten doen, maar dat moet ik maar eens gaan testen

[ Voor 70% gewijzigd door Verwijderd op 18-01-2005 11:32 ]

[BtM909]

Verwijderd schreef op dinsdag 18 januari 2005 @ 11:28:
[...]


volgens mij lees ik dat ie gewoon mobile devices geen css wil geven

Smiecht.. Haal die tweede zin maar weg

Ook zou ik graag helemaal geen plaatjes willen doorgeven.

[Cubix]

Dat plaatjes weghalen is geen probleem natuurlijk. Elk plaatje heeft bij mij z'n eigen ID, dus die kan dan op display: none. Of worden ze dan toch geladen... Thuis ff testen na mijn stage.

[Verwijderd]

Cascading Stylesheet:

img {
display: none;
}

worden ook niet geladen
@BtM909 was me niet opgevallen:P

overigens: als je wou gaan lezen: http://www.w3.org/TR/html4/types.html#type-media-descriptors

[ Voor 57% gewijzigd door Verwijderd op 18-01-2005 11:38 ]

[BtM909]

Cubix schreef op dinsdag 18 januari 2005 @ 11:32:
Dat plaatjes weghalen is geen probleem natuurlijk. Elk plaatje heeft bij mij z'n eigen ID, dus die kan dan op display: none. Of worden ze dan toch geladen... Thuis ff testen na mijn stage.

of nog makkelijker:

Cascading Stylesheet:

img{
  display:none;
}

edit:

grrrrrrr

[ Voor 5% gewijzigd door BtM909 op 18-01-2005 11:34 ]

[Cubix]

Uh, probleempje in het geval van 'display: none': de 'alt' tekst wordt ook niet weergegeven. Niet de juiste manier dus.

[BtM909]

Cubix schreef op dinsdag 18 januari 2005 @ 11:37:
Uh, probleempje in het geval van 'display: none': de 'alt' tekst wordt ook niet weergegeven. Niet de juiste manier dus.

Waarom zou je dat willen?

Dan krijg je dit te zien:

bla bla bla

pic: Jenna Jameson naakt

bla bla bal

Heb je toch niks aan? Plaatje voeg je als image toe als het iets toevoegt aan de tekst. Wil je hem niet weergeven, dan moet je ei'k niks laten zien.

[Verwijderd]

dan zou je moeten wachten tot css3:

Cascading Stylesheet:

img {
content: attr(alt);
}

[ Voor 3% gewijzigd door Verwijderd op 18-01-2005 11:42 ]

[Cubix]

BtM909 schreef op dinsdag 18 januari 2005 @ 11:40:
[...]

Waarom zou je dat willen?

Dan krijg je dit te zien:


[...]

Heb je toch niks aan? Plaatje voeg je als image toe als het iets toevoegt aan de tekst. Wil je hem niet weergeven, dan moet je ei'k niks laten zien.

Simpel voorbeeld dan: Ik heb een banner op mijn site staan, een plaatje dus. Op een handheld moet er gewoon de aanklikbare naam van de sponsor komen te staan (de alt-tekst) en niet de grafische banner.

[Verwijderd]

dan zou ik het zo doen:

HTML:

<a id="banner" href=""><span>andere text</span><img /></a>

en met je css selecteren op welk element je laat zien.

[BtM909]

Cubix schreef op dinsdag 18 januari 2005 @ 11:44:
[...]


Simpel voorbeeld dan: Ik heb een banner op mijn site staan, een plaatje dus. Op een handheld moet er gewoon de aanklikbare naam van de sponsor komen te staan (de alt-tekst) en niet de grafische banner.

Ok, maar dat strookt dan niet met je vraag: ik wil de plaatjes niet showen

[Verwijderd]

Gewoon '<div id="banner">Grote boze sponsor</div>' gebruiken lijkt me. En dan met CSS (media="screen") even het plaatje invoegen.

[JHS]

Verwijderd schreef op dinsdag 18 januari 2005 @ 16:02:
Gewoon '<div id="banner">Grote boze sponsor</div>' gebruiken lijkt me. En dan met CSS (media="screen") even het plaatje invoegen.

Met css kan je plaatjes lijkt me alleen als background-image invoegen. Dan blijft de text zichtbaar, wat me onwenselijk lijkt.

[Verwijderd]

Onzin.

Cascading Stylesheet:

div#banner{
 text-indent:-1000em;
 overflow:hidden;
 height:60px;
 width:400px;
 color:#000;
 background:#fff url(foo.png);
}

[JHS]

Verwijderd schreef op dinsdag 18 januari 2005 @ 19:47:
Onzin.(code)

Oh. Dom, niet aan het verplaatsen van de text gedacht . Ach, weer wat bijgeleerd.

[ Voor 7% gewijzigd door JHS op 18-01-2005 19:52 ]