zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dynamisches CSS per Server? Oder client? Oder wie?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.11.2010, 23:31
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard Dynamisches CSS per Server? Oder client? Oder wie?

Wie es auch geht, aber wie??

Dan Cederholm, Autor vieler guter Bücher (... nie eins gelesen, aber was man so hört...) über CSS und Webdesign, verwendet auf seiner Seite SimpleBits seit einer Woche ein neues Design.

Bei normalen Desktopviewports sieht man am linken Rand das neue Logo mit wenigen Navigationslinks darunter. Das ganze mit position:fixed, was bei kleinen Bereichen auch problemlos geht.

Nun gehts aber los. Sobald sich der Viewport aka Browserfenster unter ~660px Breite befindet, ändert sich Position UND CSS des betreffenden Containers #nav (und diverser anderer Elemente). Es wird nun oben angesiedelt und die Navilinks laufen hübsch wie Perlen auf einer Schnur horizontal. Durchaus sinnvoll, aber wie zum Teufel, macht er das??

Die unterschiedliche CSS:

Großer Viewport:

Code:
#nav {
float:left;
letter-spacing:1px;
position:fixed;
text-transform:uppercase;
width:14.2857%;
}
Kleiner Viewport:

Code:
#nav {
float:none;
padding-top:20px;
position:static;
text-align:center;
width:100%;
}
OK, kein Thema, irgendwie wird die aktuelle Fensterbreite ausgelesen und das css "irgendwie" dynamisch angepasst. Die Semantik der Anweisungen läßt darauf schließen, das da was überschrieben wird. Und siehe da: Ab Zeile 976 der "Style.css" werden bereits gestylte Elemente nochmals gestylt.
Aber: Nach der Kaskadierungsregel müssten alle vorherigen gleichartigen CSS-Anweisungen für diese Elemente überschrieben werden, ist ja in einer Datei, warum aber findet die CSS-Kaskade hier KEINE Anwendung bzw. NUR bei kleinem Viewport? Hier gibt es anscheinend keine media-query, die davon abgesehen, nur bei einem page-load Anwendung fände.


Das CSS-File ist offenbar syntaktisch korrekt verlinkt, schließt aber Internet Explorer kleiner IE 7 aus (andere Browser können es trotzdem lesen):

Code:
<!--[if gte IE 7]><!-->
<link rel="stylesheet" media="screen, projection" href="http://simplebits.com/-/css/styles.css" />
<!-- <![endif]-->

Was bringt den Server oder den client dazu, das file offenbar segmentiert auszulesen? Wenn ich javascript ausschalte ( per Webdeveloper) findet der Style-Wechsel trotzdem statt. Die style-Information, also style.css ist jedoch stets zur Gänze verfügbar.

Ich habe natürlich über eine serverseitige Konstruktion der css nachgedacht, andererseits: Irgendwie muss ja die Viewportgrösse ermittelt werden und darauf reagiert werden. Das geht doch nur clientseitig?

Etwas ratlos, aber neugierig

Könnte durchaus hilfreich sein, wenn man die lästigen media-queries vermeiden und schnelle Ladezeiten ( weniger http-requests) haben möchte.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.11.2010, 00:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Schau doch nochmal genau in das Stylesheet rein
Zitat:
Code:
@media screen and (max-width: 800px) {
[...]
@media screen and (max-width: 650px) {
Nicht mehr geheimnisvoll, oder?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.11.2010, 00:23
Benutzerbild von XHTMLvalid
IE OMG WTF
XHTMLforum-Mitglied
 
Registriert seit: 03.09.2010
Ort: Palma de Mallorca
Beiträge: 161
XHTMLvalid wird schon bald berühmt werden
Standard

Wollt grad sagen, kommt mir bekannt vor...

@media screen wirds schon richten
__________________
XHTML-Valid-Websites.com | CookielessDomain.com | Stop-Supporting-IE6.com
if (browser == IE) { sucks(big); } else { nice(site); }
Mit Zitat antworten
  #4 (permalink)  
Alt 25.11.2010, 10:36
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

gnarf.

Ich habe das Stylesheet zweimal überflogen und mit firebug gestern sogar nach "@media" gesucht und nichts dergleichen gefunden. firebug ist da verbuggt. (?)

Weder "@media" noch "media" wird gefunden, es wird nicht mal angezeigt.
Habe die style.css heute heruntergeladen, in meinem Editor prangt es groß und deutlich............


OK..... damit hat sich das Geheimnisvolle erledigt und ich kann mit dem Kopfkratzen aufhören.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 25.11.2010, 13:20
{ display: random;}
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

O.k. ich habs gefunden,

der Bug oder das "Feature" ist dokumentiert:

Issue 1717 - fbug - CSS Panel does not have @media UI - Project Hosting on Google Code

Zitat:
the current UI will
display the contents of the @media elements by have no indication that they
only apply to certain cases.
Edit: Bei künftigen Zweifeln werde ich erstmal das stylesheet herunterladen...
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Geändert von andir (25.11.2010 um 13:25 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
XML auf dem Server per XSLT in HTML transformieren AndreasB Serveradministration und serverseitige Scripte 15 16.03.2011 16:20
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Option Value aufgrund Value inhalt per CSS definieren noxx-forever CSS 7 01.08.2010 22:09
Zwei CSS Dateien per Knopfdruck wechseln exanimishh CSS 3 05.11.2008 09:51
"Fusszeile" per CSS? derSESO CSS 3 02.02.2005 01:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:35 Uhr.