CSS-Hacks

**Napalm** · 17.10.2011, 15:14

Hallo!

Ich versuche momentan das neue Feature CSS-Hacks einzubinden. Es geht speziell darum, auch eine mobile Version zu erstellen.
Vorgegangen bin ich wie auf der Seite 'Vergesst Browser-Hacks in Contao 2.10'. Leider wird mir aber im lokalen Browser die mobile Version ausgegeben. Hat vielleicht jemand eine Idee, was ich hier falsch mache?

Da dieses Testprojekt nur lokal vorliegt, kann ich leider noch keinen Link anbieten.

**pmmueller** · 17.10.2011, 15:25

Wenn du mit dem "Feature CSS-Hacks" die zusätzlichen body-Klassen meinst, das ist nicht ganz unumstritten, da es nur auf dem Auslesen des UA-Strings basiert, den der besuchende Browser angibt. Ob du dabei was falsch machst, weiß ich nicht.

Für eine mobile Version, kannst du alternativ im internen Stylesheet-Editor mit "Media Query" arbeiten.

**Napalm** · 17.10.2011, 15:49

Ich sehe eben, daß es soweit funktioniert, wenn ich 'iphone safari sf5 mobile' aus der Body-Klasse entferne. Damit bin ich zwar schon einmal zufrieden, verstehe dies aber nicht wirklich.
Dennoch danke für deine Antwort und ich werde mich weiter mit diesem Thema beschäftigen.

**ways2web** · 17.10.2011, 16:21

Zitat von Napalm

Ich sehe eben, daß es soweit funktioniert, wenn ich 'iphone safari sf5 mobile' aus der Body-Klasse entferne. Damit bin ich zwar schon einmal zufrieden, verstehe dies aber nicht wirklich.
Dennoch danke für deine Antwort und ich werde mich weiter mit diesem Thema beschäftigen.

du findest in deinem normalen browser am pc die klasse für das iphone imn quelltext? Hast du zufällig die Firefox Erweiterung "user agent" im betrieb gehabt um das mit den klassen zu testen?

gruss
ways

**Napalm** · 17.10.2011, 17:07

Nein, so werden sie nicht angezeigt. Nur wenn ich sie direkt in Contao einbinde. Aber das soll man ja so nicht machen, weil das wohl automatisch erkannt wird und entsprechend die CSS-Klassen angesprochen werden. Wenn ich es denn richtig verstanden habe.
Allerdings dann wohl auch nur den Wrapper und nicht den Body, denn .mobile body {background-color: #ff0000;} wird nicht ausgegeben. Únd das verstehe ich wiederum nicht.

Diese Erweiterung habe ich nicht. Sollte ich?

**ways2web** · 17.10.2011, 17:15

ja, die klasse wird je nach browser automatisch eingefügt!

du brauchst sie auch nur ein mal im body. kannst ja dann zum bsp:

HTML-Code:

body .iphone div{
border:0px;
}

verwenden. So wird das ganze nur verwendet, wenn halt der iphone selektor in deinem quelltext vorkommt.. und der kommt nur, wenn halt das iphone die seite aufruft!
ansonsten kannst du ja body div{bla} setzen...

was die extension angeht... geschmackssache!

gruss
ways

**Napalm** · 17.10.2011, 17:51

Irgendwie funktioniert das nicht so richtig bei mir. Gut, mit iphone kann ich nicht direkt testen, weil ich keins habe. Dafür eins mit Android und da wäre die Frage, was dort übermittelt wird. Quelltexte anschauen geht da nicht. Aber meines Wissens schon 'android'. Doch mein Body zeigt keinen anderen BG an - body .android {background-color: #ff0000;} auch nicht mit body .mobile .android , etc.
Bei Medientypen habe ich alle ausgewählt.

**Napalm** · 17.10.2011, 17:55

Nebenbei... Die Erweiterung ist nicht schlecht und schein zu helfen. Danke für den Tipp!

**Napalm** · 17.10.2011, 18:04

Ich habe jetzt gesehen, daß ein .mobile #header {...} übernommen wird. Aber ein .mobile body {...} nicht. Warum ist das so?

**ways2web** · 17.10.2011, 18:11

Zitat von Napalm

... Aber ein .mobile body {...}

wenn wäre es sein body .mobile{..}

du musst nur in den body schauen...
meiner sieht zb so aus :

HTML-Code:

<body id="top" class="win firefox fx7 lang-de">

wenn ich also ne eigene hintergrundfarbe für den firefox will dann so:

HTML-Code:

body .firefox{ background:#000}

gruss
ways

**Napalm** · 17.10.2011, 19:25

Ich hab ein 'normales' body was akzeptiert wird. Füge ich ein body .firefox ein, wird es nicht akzeptiert. Im Browser wird Firefox aber mit ausgegeben - <body id="top" class="win firefox fx7">. Also irgendwie funktioniert das mit dem body alles nicht. Mit anderen Klassen aber schon.
Ich verwende die aktuelle Version 2.10.2.

**MacKP** · 17.10.2011, 19:32

Hallo Napalm,
das leerzeichen ist zu viel.
Es heißt:

Code:

body.firefox

Da sicher nicht irgendwo sonst noch firefox als Klasse genommen wird, reicht auch ein .firefox

Viele Grüße

**pmmueller** · 17.10.2011, 19:39

Zitat von Napalm

Doch mein Body zeigt keinen anderen BG an - body .android {background-color: #ff0000;} auch nicht mit body .mobile .android , etc.

Vielleicht doch nochmal Grundlagen CSS anschauen (Abschnitt zu Selektoren), denn wenn du das HTML <body class="android"> mit body .android oder ähnlichem Krembembel gestalten willst, dann wird das nichts. Wie MacKP schon sagt, da ist eine Leerstelle zu viel.

**Napalm** · 17.10.2011, 19:41

Danke, das war es. So muß ich mich noch ein wenig mehr mit CSS beschäftigen.
Mein Dank auch an die anderen.

**Napalm** · 19.10.2011, 21:29

Also ich habe mal ein wenig weiter geschaut und entsprechend einige Lösungen für mich gefunden. Vielleicht kann der eine oder andere damit auch etwas anfangen.
Die Bedenken der Ladezeiten einer mobilen Version sind durchaus berechtigt und auch der Einwand, daß nicht jede Nachricht für mobile Leser interressant sein muß. Mein Ansatz ist entsprechend der, daß ich jeder Nachricht eine Klasse vergebe, welche auch allgemein für andere Elemente genutzt werden kann. Genannt habe ich sie einfach .normalCSS (für die normalen Seiten in Windows, Linux, Mac) und mobileCSS (für Android oder iPhone). So kann ich jetzt mit CSS die Nachrichten und anderen Elemente filtern. In meinem Bsp. noch die rechte Spalte, welche ich in der mobilen Version nicht angezeigt haben möchte.
Um das alles besser zu verdeutlichen, habe ich zwei Screenshot mit angehängt. Ich hoffe das es so ersichtlich ich, wie man mit CSS Elemente filtern kann.
Aber vielleicht gibt es auch noch elegantere Methoden. Da ich mich in die ganze Materie erst einarbeite, bin ich natürlich auch offen für andere Tipp und Tricks.

**pmmueller** · 19.10.2011, 21:32

Wenn du irgendetwas per CSS "filterst" (also ausblendest), wird es aber vorher trotzdem zum Client übertragen. Die Ladezeiten verändert das also kaum.

**Napalm** · 19.10.2011, 21:42

Das stimmt natürlich. Aber es ist ja nicht anders mit diesem CSS-Hack hier zu lösen. Zumindest wird so nicht alles ausgegeben und auch Wunsch auch anderer Inhalt, wie eben Bilder oder Links.
Ich mache ja keine Seiten für Firmen oder sonstige, stelle es mir aber schwierig vor, einem Kunden eine zweite, mobile, Version seiner Homepage 'zu verkaufen'. Hier hat er nur eine und kann eben, filtern.
Für mich selbst ist das zumindest eine Lösung. Da ich aber mit dem ganzen CMS sowieso noch nicht durch bin,wird sicherlich noch eine andere Lösung irgendwann hinzukommen. Am liebsten wäre mir auch eine Browserweiche per PHP, aber das schau ich mir noch genauer an.

**pmmueller** · 20.10.2011, 08:57

Das sollte keine "Mecker" sein. Ich finde die Idee mit den Klassen an sich recht pfiffig

**MacKP** · 20.10.2011, 09:27

Damit man nicht immer alles läd, könnte man das ganze über diese Erweiterung machen: http://www.contao.org/erweiterungsli...ection.de.html
Für Mobil wird dann im Template alles unnötige entfernt ;-)

Viele Grüße

**Napalm** · 20.10.2011, 10:34

Danke, das schaue ich mir genauer an.

**Napalm** · 20.10.2011, 10:38

Zitat von pmmueller

Das sollte keine "Mecker" sein. Ich finde die Idee mit den Klassen an sich recht pfiffig

Ich habe dies nicht als 'Mecker' empfunden.

**ofriedrich** · 20.10.2011, 14:35

Zitat von MacKP

Damit man nicht immer alles läd, könnte man das ganze über diese Erweiterung machen: http://www.contao.org/erweiterungsli...ection.de.html
Für Mobil wird dann im Template alles unnötige entfernt ;-)

Viele Grüße

Schaut ganz interessant aus diese Erweiterung. Allerdings erfordert es wohl, dass man für jedes verwendete Template eine weitere Version mit einer anderen Endung erstellt. Oder gibt es einen Fallback, wenn ein Template nicht mit der gewünschten Endung verfügbar ist?

Ich finde die Lösung über CSS jedoch wesentlich wartungsfreundlicher. Die selbst gebauten Templates müssen nämlich u. U. bei einem Contao-Update angepasst werden. Der gesamte HTML-Quelltext macht sicher nicht den Löwenanteil der Seite aus. Daher kann man es sich meiner Meinung nach schon erlauben, auch in der Mobile-Verision den gleichen HTML-Quelltext zu laden wie in der normalen Version. Mobile-Light eben!

**andreasisaak** · 20.10.2011, 14:53

1. Ja es gibt es ein Fallback wenn ein Template nicht in dem gewünschten Format vorhanden ist.
2. NEIN. Es ist nicht besser nur die CSS auszutauschen. Wir hätten sonst diese Erweiterung nicht entwickelt

Wir haben jetzt schon einige mobile-optimierte Websites umgesetzt und mit Extensions wie Theme+ ist das CSS das kleinste Thema. Mit Templates kann man doch mehr erreichen, z.B. Bilder automatisch in eine mobile-gerechte Auflösung runterrechnen, die Navigation kürzen etc.

Natürlich ist es auf den ersten Blick wartungsfreundlicher weil man beim Update keine Templates anpassen muss aber wir haben in unseren Contao-Installationen generell wenige Templates und wenn dann da noch 4 mobile-optimierte Templates dazu kommen, dann kann ich damit sehr gut leben.

Und so oft müssen Templates nach einem Update nicht aktualisiert werden - das passiert in der Regel nur bei Major-Releases!

Thema: CSS-Hacks

Themen-Optionen

Thema durchsuchen

CSS-Hacks

Aktive Benutzer

Aktive Benutzer

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher