Warum ist das CSS Styling von vielen Mobile Sites so komisch

[cdash]

Ich beschäftige mich seite einiger Zeit mit alternativen css Dateien für den Zugriff mit mobilen Endgeräten für die Seiten die ich baue.

Ich habe mir dazu das Markup und CSS von einigen Seiten angeschaut und mir sind dabei einige Gemeinsamkeiten aufgefallen die ich nicht verstehe.

1. Häufig wird eine css Datei eingebunden, Styles sind aber auch direkt im Dokument definiert UND im Tag.

2. Tabellen werden überproportional häufig als Gestaltungselement verwendet.

3. Klassen und ID Bezeichnungen mit Leerzeichen class="table mode1 small" (Hat das was mit mobile zu tun oder ist das Zufall, - geht das überhaupt?)

Zum Beispiel ist http://www.spiegel.de eine Seite die vom Markup und vom CSS her für mich spontan recht verständlich aussieht. Und bei http://m.spiegel.de/ sind überall Tabellen, Styles wild verteilt etc. Aufgrund des Eindruckes von den normalen Seite würde ich sagen die verstehen schon was von dem was sie tun und haben sich bei der Mobile Seite auch was dabei gedacht.

Hat das was mit den Browsern von Mobiltelefonen zu tun? Können manche keine css einbinden, funktioniert ein Positionierung von Elementen nicht per css oder warum sind da überall Tabellen?? Oder sind die Mobile Seiten einfach schlecht gemacht?

Über Feedback und weiterführende Links würde ich sehr freuen

Danke

Andreas

[Bobby]

Moin

3. Klassen und ID Bezeichnungen mit Leerzeichen class="table mode1 small" (Hat das was mit mobile zu tun oder ist das Zufall, - geht das überhaupt?)

Ich kann dir erstmal nur was zu 3. sagen. class="table mode1 small" ist erlaubt. Das ist der Aufruf von mehreren CSS-Klassen-Selectoren. Es wird hier der im CSS definierte Style von .table{} .mode1{} und .small{} auf das Element angewendet. Dieser Aufruf ist üblich und auch auf vielen "normalen" Seiten zu finden.

Gruß Bobby

[cdash]

Danke

Das ist der Aufruf von mehreren CSS-Klassen-Selectoren. Es wird hier der im CSS definierte Style von .table{} .mode1{} und .small{} auf das Element angewendet. Dieser Aufruf ist üblich und auch auf vielen "normalen" Seiten zu finden.

Das habe ich noch nie so gemacht und kannte ich nicht. Damit kann man also mehrere Klassen auf ein Objekt anwenden? Dann kann man sich in der css sozusagen modulare css Bausteine erstellen und die dann im HTML unterschiedliche kombinieren.

Danke

Andreas

[LX]

Mehrere CSS-Klassen solcherart hintereinander getrennt werden erst ab CSS Version 2 unterstützt - die bspw. der IE6 noch nicht beherrscht - er verwendet immer nur die letzte angegebene Klasse.

Gruß, LX

[Bobby]

Moin

Mehrere CSS-Klassen solcherart hintereinander getrennt werden erst ab CSS Version 2 unterstützt - die bspw. der IE6 noch nicht beherrscht - er verwendet immer nur die letzte angegebene Klasse.

Da muss ich dir wiedersprechen:

  
<style>  
.red{color:red}  
.big{font-size:26px;}  
</style>  
<b class="red big">test</b>  

versteht auch der IE6. IE6 versteht nur nicht .red.big-Selectoren.

Habs auch gestestet. IE6 versteht Angabe von mehreren Klassen getrennt mit Leerzeichen definitiv.

Gruß Bobby

[suit]

Habs auch gestestet. IE6 versteht Angabe von mehreren Klassen getrennt mit Leerzeichen definitiv.

Nein, denn das wäre ein Fehler :)

class="foo bar" sind im HTML-Kontext keine Klassen die es zu verstehen gibt, es ist lediglich ein class-Attribut mit dem wert "foo bar".

Erst im CSS-Kontext gibt es Klassen, namentlich "foo" und "bar", diese mit leerzeichen getrennt im Selektor zu notieren wäre uncool.

  
.foo bar {}
~~~ würde lediglich alle "bar"-Elemente innerhalb der Klasse "foo" ansprechen. `.foo.bar {}`{:.language-css} hingegen funktioniert im IE6 nicht, wie du schon sagst.

[Cybaer]

Hi,

class="foo bar" sind im HTML-Kontext keine Klassen die es zu verstehen gibt, es ist lediglich ein class-Attribut mit dem wert "foo bar".

Erst im CSS-Kontext gibt es Klassen,

IMHO Andersherum. HTML "kennt" Klassen, und Elemente dürfen auch mehreren Klassen angehören. "Nutzen" kann HTML das natürlich nicht. Es dient "nur" der Struktur. CSS hingegen kann das nutzen. Aber nicht nur CSS ...

.foo bar {}[/code] würde lediglich alle "bar"-Elemente innerhalb der Klasse "foo" ansprechen. .foo.bar {} hingegen funktioniert im IE6 nicht, wie du schon sagst.

Da es hier darum nicht geht, kann man den Fall ja auch der Übersichtlichkeit halber  weglassen ...

Der Netscape Navigator 4.x beherrscht in CSS nur eine Klasse pro Element. Und der ist ja nun schon ein wenig älter ... =;-)

Gruß, Cybaer

[molily]

class="foo bar" sind im HTML-Kontext keine Klassen die es zu verstehen gibt, es ist lediglich ein class-Attribut mit dem wert "foo bar".

Nein, es gehört zur Grammatik hinzu, dass das class-Element aus durch Leerzeichen getrennten Namen besteht.
http://www.w3.org/TR/html401/struct/global.html#adef-class
http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#classes
http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_commonatts

Erst im CSS-Kontext gibt es Klassen

Ein schwerwiegender Irrtum.

Mathias

[Gunnar Bittersmann]

@@suit:

class="foo bar" sind im HTML-Kontext keine Klassen die es zu verstehen gibt

?? Aber sicher doch.

es ist lediglich ein class-Attribut mit dem wert "foo bar".

Und dieser Wert besagt, dass das entsprechende Element den Klassen "foo" und "bar" angehört.

„class = cdata-list [CS]
    Dieses Attribut ordnet einem Element einen Klassennamen oder einen Satz von Klassennamen zu. Dem- oder denselben Klassennamen kann eine beliebige Anzahl von Elementen zugeordnet werden. Multiple Klassennamen müssen durch Leerzeichen voneinander getrennt werden.“ [HTML401 §7.5.2]

Erst im CSS-Kontext gibt es Klassen

Nein. Im HTML-Kontext gibt es sehrwohl Klassen. Diese lassen sich vielfältig nutzen, z.B. für Mikroformate.

Im CSS-Kontext gibt es Attributselektoren. Für den Attributselektor '[class~="foo"]' gibt es die spezielle Schreibweise '.foo'; das nennt sich dann Klassenselektor. [CSS2 §5.1, CSS2 §5.8.3]

Live long and prosper,
Gunnar

[Bobby]

Moin

Mehrere CSS-Klassen solcherart hintereinander getrennt werden erst ab CSS Version 2 unterstützt - die bspw. der IE6 noch nicht beherrscht - er verwendet immer nur die letzte angegebene Klasse.

PS: CSS2.0 wurde bereits ab IE4 teilweise unterstützt.
Siehe hier

Gruß Bobby

[Gunnar Bittersmann]

@@LX:

Mehrere CSS-Klassen […]

Es gibt keine „CSS-Klassen“!! Cheatah wird dir das bestimmt gerne erklären.

die bspw. der IE6 noch nicht beherrscht - er verwendet immer nur die letzte angegebene Klasse.

Sag bitte dazu, dass du dich auf CSS und den Klassenselektor beziehst, nicht auf HTML und das 'class'-Attribut.

Was der IE wirklich falsch macht

Live long and prosper,
Gunnar

[Bobby]

Moin

Das habe ich noch nie so gemacht und kannte ich nicht. Damit kann man also mehrere Klassen auf ein Objekt anwenden? Dann kann man sich in der css sozusagen modulare css Bausteine erstellen und die dann im HTML unterschiedliche kombinieren.

Ja . Aber CSS wird nicht auf "Objekte" sondern auf Elemente angewandt. Nur so als Hinweis. Beispiele wie Klassen definiert werden können findest du auch hier

Gruß Bobby

[suit]

Das ist der Aufruf von mehreren CSS-Klassen-Selectoren. Es wird hier der im CSS definierte Style von .table{} .mode1{} und .small{} auf das Element angewendet.

Nein, wenn im CSS .table.mode1.small {} als Selektor angegeben wird, hat dieser eine höhere Spezifität als die drei von dir genannten und überschreibt ggf. deren Eigenschaften. Korrekterweise müsstest du sagen, dass du das Attribut class="table mode1 small" z.B. mit den Selektoren .table {} .mode1 {} oder .small {} ansprechen kannst, welche Eigenschaften letztendlich angewandt werden, steht auf einem anderen Blatt :)

[LX]

Das Tabellen-Layout auf mobilen Seiten hängt vielfach damit zusammen, dass

1. viele selbsternannte Experten für Mobiles Web keine Ahnung haben,
2. viele ältere Clients nichts Neueres als HTML4 kennen.

Wenn Du es besser machen willst, definiere erst einmal, was Du als mobilen Client betrachtest und dann schau Dir an, mit welchen Browsern Du rechnen musst (etwa Opera Mobile, Webkit-Series60, etc.).

Gruß, LX

[cdash]

Wenn Du es besser machen willst, definiere erst einmal, was Du als mobilen Client betrachtest und dann schau Dir an, mit welchen Browsern Du rechnen musst (etwa Opera Mobile, Webkit-Series60, etc.).

»»

Da kenne ich mich leider nicht so gut aus, was es so an mobilen Browsern gibt - aber die genannten Opera Mobile und div. Webkit Browser kommen eigentlich sehr gut mit css Styling und Positionierung zurecht. Das sind natürlich auch recht moderne Browser aber - weil ich z.B. selber ein Mobiltelefon mit Opera Mobile habe bin ich ja über dieses Tabellendesign so erstaunt.

[Klawischnigg]

Hi there,

Da kenne ich mich leider nicht so gut aus, was es so an mobilen Browsern gibt - aber die genannten Opera Mobile und div. Webkit Browser kommen eigentlich sehr gut mit css Styling und Positionierung zurecht. Das sind natürlich auch recht moderne Browser aber - weil ich z.B. selber ein Mobiltelefon mit Opera Mobile habe bin ich ja über dieses Tabellendesign so erstaunt.

Alle Sony Ericsson Handys mit Symbianbetriebssystem und tlw. auch die Motorolageräte haben Browser, die sich mit css schwerer tun als mit javascript, warum auch immer; auf jeden Fall sind diese Handys imho weiter verbreitet als jene, die den mobilen Opera schon drauf haben...

[cdash]

Alle Sony Ericsson Handys mit Symbianbetriebssystem und tlw. auch die Motorolageräte haben Browser, die sich mit css schwerer tun als mit javascript, warum auch immer; auf jeden Fall sind diese Handys imho weiter verbreitet als jene, die den mobilen Opera schon drauf haben...

Ich habe auch noch ein altes SonyEricsson mit Symbian da werde ich das mal testen. Das Interessiert mich ja doch. Danke schon mal für den Tipp.

Andreas

[molily]

Alle Sony Ericsson Handys mit Symbianbetriebssystem und tlw. auch die Motorolageräte haben Browser, die sich mit css schwerer tun als mit javascript, warum auch immer;

Was gibts denn für ältere Symbian-Browser wenn nicht der WebKit-basierten)?

Mathias

[cdash]

1. viele selbsternannte Experten für Mobiles Web keine Ahnung haben,

ich habe gerade noch eine Mobile Seite gefunden die ähnlich konfus aufgebaut ist.

http://m.imd.ch/

Dort gibt es auch folgende seltsame Klassen im Markup:
class="imageheader mode1"

Weil ich über die Klasse mode1 gestolpert bin habe ich mir mal die externe css Datei angeschaut die erstauntlicherweise auch global.css heißt. Und tatsächlich:
http://m.spiegel.de/nbinternal/global.css
http://m.imd.ch/nbinternal/global.css
liegen im gleichlautenden Verzeichnis und sind identisch.

Das scheint von irgendeiner Software generiert zu werden.

[cdash]

sorry

http://m.imd.ch/

http://m.spiegel.de/nbinternal/global.css
http://m.imd.ch/nbinternal/global.css

[suit]

ich habe gerade noch eine Mobile Seite gefunden die ähnlich konfus aufgebaut ist.
http://m.imd.ch/

Das hat aber imho nichts mit einer Variante der Seite zu tun, das ist ein völlig anders Dokument mit einenem CSS.

Beindruckt wäre ich, wenn das HTML-Dokument identisch ist und per media queries oder ähnlichem für die unterschiedliche Darstellung gesorgt wird.

[cdash]

Beindruckt wäre ich, wenn das HTML-Dokument identisch ist und per media queries oder ähnlichem für die unterschiedliche Darstellung gesorgt wird.

es geht nicht um beeindruckt sein sondern um entsetzt sein :-). Es handelt sich um eine weitestgehend sinnlose css.

Ich versuche einfach nur dahinter zu steigen warum viele Mobile Seiten so aufgebaut sind wie sie sind. Ob die Leute die das machen Tricks und Hacks kennen oder ob die Seiten einfach schlecht gemacht sind.

[Cybaer]

Hi,

Beindruckt wäre ich, wenn das HTML-Dokument identisch ist und per media queries oder ähnlichem für die unterschiedliche Darstellung gesorgt wird.

Da wäre ich auch beeindruckt. Aber eher, weil ich mich fragen würde, warum der Autor sich die Mühe einer Mobilversion macht, die noch von kaum einem Mobilgerät unterstützt wird. >;->

Gruß, Cybaer

[Harlequin]

Yerf!

Das scheint von irgendeiner Software generiert zu werden.

Eine Google-Suche führt zu netbiscuits.

Gruß,

Harlequin

[Beat]

Eine Google-Suche führt zu netbiscuits.

Pfui deibel.....

mfg Beat

[Klawischnigg]

Hi there,

2. Tabellen werden überproportional häufig als Gestaltungselement verwendet.

Das macht Sinn, weil die Browser in vielen Mobiltelefonen mit Tabellen wesentlich besser umgehen können. Natürlich könnte man sich zB den mobilen Operabrowser oder auch bald den Fennek 'runterladen, aber wer ausser ein paar Freaks macht das schon?

[molily]

Das macht Sinn, weil die Browser in vielen Mobiltelefonen mit Tabellen wesentlich besser umgehen können. Natürlich könnte man sich zB den mobilen Operabrowser oder auch bald den Fennek 'runterladen, aber wer ausser ein paar Freaks macht das schon?

Werd mal konkreter. Die heutigen Mobiltelefone haben m.W. WebKit-Derivate, IE Mobile oder Opera/Presto-Derivate. Ältere haben ggf. NetFront-Derivate. WebKit und Opera sind hervorragend, IE Mobile vermutlich mittelmäßig hinsichtlich CSS-Unterstützung und -Layouttechniken. Aber wahrscheinlich behandelt man die NetFronts noch wie einst Netscape 4, man kommt nicht von ihnen weg?!

Mathias