nicht angemeldet
oxo888oxo
molily
Gunnar Bittersmann
oxo888oxo
Gunnar Bittersmann
molily
molily
Hallo
Meine Webseite mache ich gerade neu mit HTML5, CSS3 und Media Queries (mobile first).
Um das die "dazugehörigen" Probleme mit den alten IEs in den Griff zu bekommen, habe ich mich entschieden, nicht auf Javascript zu setzen.
Ich möchte lieber per Conditional Comments den alten IEs eine eigene CSS-Datei zuweisen.
Ist dafür folgendes richtig?
Matthias Apsel
<link rel="stylesheet" type="text/css" href="/css/_xx_css-standard.css" media="screen">
<link rel="stylesheet" type="text/css" href="/css/_xx_css-druck.css" media="print">
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/css/_xx_css-alte-ie.css" media="screen">
<![endif]-->
Gruß
Ingo
Hallo,
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/css/_xx_css-alte-ie.css" media="screen">
<![endif]-->
Das kann man so machen, ja.
Ob man Conditional Comments mit separaten Stylesheets nutzt, ist Ansichtssache. Andere nutzen lieber [Selektor-Hacks](http://browserhacks.com/), damit sie die Styles für ein Modul an ein und derselben Stelle haben, anstatt sie separat zu lagern. Das verringert den Wartungsaufwand – wenn du an einem Modul etwas änderst, dann musst du jedes Mal im IE-Stylesheet nachsehen, ob es eine zugehörige Regel gibt, und diese anpassen. Ellenlange Diskussionen dazu findest du im Forumsarchiv.
Von dieser Sache abgesehen würde ich eher bezweifeln, dass sich IE 6 und IE 8 in einem Stylesheet behandeln lassen. Zwischen IE 6 und IE 8 liegen Welten. IE 6 und 7 haben außerhalb der Volksrepublik China keine Relevanz mehr, daher würde ich realistischerweise nur IE 8 testen. Für den sind wiederum nicht viele Anpassungen nötig. Falls das für deine Site zutrifft, ist ein separates Stylesheet eher Kanonen auf Spatzen.
Viele Grüße,
Mathias
--
[Chaplin.js - JavaScript application architecture on top of Backbone.js](http://chaplinjs.org/)
Von dieser Sache abgesehen würde ich eher bezweifeln, dass sich IE 6 und IE 8 in einem Stylesheet behandeln lassen. Zwischen IE 6 und IE 8 liegen Welten. IE 6 und 7 haben außerhalb der Volksrepublik China keine Relevanz mehr, daher würde ich realistischerweise nur IE 8 testen.
Mir geht es auch in erster Linie um den IE8.
Und wenn meine spezielle CSS-Datei dafür dann auch noch positive Effekte für IE6 und 7 hat, nehme ich das mit sozusagen. Aber spezielle Anpassungen für IE6 und 7 werde ich nicht machen.
Andere nutzen lieber Selektor-Hacks, damit sie die Styles für ein Modul an ein und derselben Stelle haben, anstatt sie separat zu lagern.
Ah cool, das ist ja auch eine feine Sache.
Das werde ich mir soglich mal genauer ergoogeln :-)
@@oxo888oxo:
nuqneH
Ist dafür folgendes richtig?
<link rel="stylesheet" type="text/css" href="/css/_xx_css-standard.css" media="screen">
<link rel="stylesheet" type="text/css" href="/css/_xx_css-druck.css" media="print">
Nö, eher nicht. Browser laden unabhängig vom media-Attribut alle Stylesheets. Da schreibt man besser alles in eins und hat die Media-Queries im Stylesheet. Mehrere HTTP-Requests vs. einer.
> ~~~html
<!--[if lte IE 8]>
> <link rel="stylesheet" type="text/css" href="/css/_xx_css-alte-ie.css" media="screen">
> <![endif]-->
>
Nö, eher nicht. Wenn separates Stylesheet/separate Stylesheets für alte IEs, dann nicht zusätzlich zu dem für Standard-Browser. Also das Standard-Stylesheet für alte IEs nicht laden.
Wie molily bereits anmerkte, bedeutet die Pflege getrennter CSS-Dateien für Standard-Browser und alte IEs einen höheren Wartungsaufwand. Deshalb hatte ich mich hier in der Vergangenheit auch immer gegen diesen Weg ausgesprochen.
Das ändert sich mit dem Einsatz von CSS-Präprozessoren. Mit Sass ist es ein Leichtes, aus einer zu pflegenden Quelldatei mehrere CSS-Dateien zu generieren. …dirty work ab Seite 26.
Qapla'
<link rel="stylesheet" type="text/css" href="/css/_xx_css-standard.css" media="screen">
<link rel="stylesheet" type="text/css" href="/css/_xx_css-druck.css" media="print">
>
> Nö, eher nicht. Browser laden unabhängig vom media-Attribut alle Stylesheets. Da schreibt man besser alles in eins und hat die Media-Queries im Stylesheet. Mehrere HTTP-Requests vs. einer.
Ah OK alles klar.
Das hate ich nicht gewusst.
Ich dachte immer, es wird nur eine geladen.
Dann machts natürlich Sinn, alles in eine Datei zu packen.
Also für die Meta-Tags so:
`<link rel="stylesheet" type="text/css" href="/css.css" media="all">`{:.language-html}
Und am Ende der CSS-Date dann das Drucklayout so:
~~~css
@media print {
...
}
Richtig?
Nö, eher nicht. Wenn separates Stylesheet/separate Stylesheets für alte IEs, dann nicht zusätzlich zu dem für Standard-Browser. Also das Standard-Stylesheet für alte IEs nicht laden.
Puh ... alter Schwede ... da habe ich Schwierigkeiten, es zu verstehen.
Habe ich es folgdermaßne richtig verstanden, was Du da sagst?
In Beispiel meines Ursprungspostings werden von nicht-alten-IEs die beiden CSS-Dateien (_xx_css-standard.css / _xx_css-druck.css) geladen.
Und von den alten IEs werden sogar alle 3 CSS-Datein geladen (_xx_css-standard.css / _xx_css-druck.css / _xx_css-alte-ie.css).
Falls ja, wäre das ja in der Tat blöd :-)
Wenn ich nun das CSS für Screen und Print in eine Datei packe, mussen die nicht-alten-IEs ja auch nur diese eine Datei laden (also auch nur ein Request).
Und die alten IEs müssten dann eben 2 CSS-Datein laden.
Ich denke, damit könnte ich aber leben.
Das müssen die User der alten IEs dann eben in Kauf nehmen.
Das mit dem Pflegeaufwand sehe ich natürlich ein.
Für mich persönlich gilt aber Folgendes:
Ich bin ja eigentlich keiner, der diverse Webseiten baut.
Ich mache jetzt einmal meine Seite und dann ist gut.
Das bedeutet also, wenn ich fertig bin, wird ein Großteil meiner diesbezüglichen Kenntnisse wieder weiter hinten ins Hirm rutschen.
Und daher ist es für mich schön und angenehm, wenn ich meinen eigenen Code dann immer noch verstehe, also wenn er nicht doch zu komplex wird.
Für einen richtigen Webmaster, der täglich damit arbeitet, ist das sicher was ganz anderes. Der hat diese ganzen komplizierteren Dinge ja dauernd im Hirn und dann auch im Blut.
Bei mir wird das aber eben nicht eintreten.
Verstehst Du, was ich damit sagen möchte?
Om nah hoo pez nyeetz, oxo888oxo!
<link rel="stylesheet" type="text/css" href="/css.css" media="all">Und am Ende der CSS-Date dann das Drucklayout so:
@media print {
...
}
> Richtig?
Du verwendest ja sicher den HTML5-Doctype:
`<link rel="stylesheet" href="…">`{:.language-html} ist ausreichend.
> Für mich persönlich gilt aber Folgendes:
> Ich bin ja eigentlich keiner, der diverse Webseiten baut.
> Ich mache jetzt einmal meine Seite und dann ist gut.
> Das bedeutet also, wenn ich fertig bin, wird ein Großteil meiner diesbezüglichen Kenntnisse wieder weiter hinten ins Hirm rutschen.
Deshalb ignorierst du alles, was IE heißt und machst genau 1 Stylesheet. Es wird sicher nicht passieren, dass deine Seite in allen Browsern ordentlich aussieht und nur im IE8 plötzlich nicht bedienbar ist. Schönheitsfehler …
> … müssen die User der alten IEs dann eben in Kauf nehmen.
Die Kraft und Zeit, die du dadurch gewonnen hast, steckst du in ggf. notwendige Anpassungen an Handys und Tabletts. Ein paar Zahlen: <http://forum.de.selfhtml.org/archiv/2014/3/t216907/#m1488791>
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [übel und Übeltalferner](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=%C3%9C#%C3%BCbel).
Du verwendest ja sicher den HTML5-Doctype:
<link rel="stylesheet" href="…">ist ausreichend.
Ach ja stimmt ja.
Muss mich noch an HTML5 gewöhnen :-)
Deshalb ignorierst du alles, was IE heißt und machst genau 1 Stylesheet. Es wird sicher nicht passieren, dass deine Seite in allen Browsern ordentlich aussieht und nur im IE8 plötzlich nicht bedienbar ist. Schönheitsfehler …
Ich nehme an, Du meinst das als Rat.
Wenn ja, danke ich Dir.
Ich werde mal versuchgen, es zu beherzigen, auch wenns mir nicht ganz leicht fällt :-)
Die Kraft und Zeit, die du dadurch gewonnen hast, steckst du in ggf. notwendige Anpassungen an Handys und Tabletts.
Meinst Du das jetzt eher allgemein?
Oder bist Du der meinung, ich könnte/sollte an meiner Seite noch schrauben, was die Darstelung auf Handys und Tabletts betrifft?
Falls Du das zweite meinst, hast Du Kritik/Vorschläge oder so?
Gruß
Ingo
Om nah hoo pez nyeetz, oxo888oxo!
Deshalb ignorierst du alles, was IE heißt und machst genau 1 Stylesheet. Es wird sicher nicht passieren, dass deine Seite in allen Browsern ordentlich aussieht und nur im IE8 plötzlich nicht bedienbar ist. Schönheitsfehler …
Ich nehme an, Du meinst das als Rat.
Ja, meine ich. In IE6 und 7 würde ich keine Zeit mehr investieren. Und im IE8 wird die Seite auch vernünftig aussehen.
Die Kraft und Zeit, die du dadurch gewonnen hast, steckst du in ggf. notwendige Anpassungen an Handys und Tabletts.
Meinst Du das jetzt eher allgemein?
Oder bist Du der meinung, ich könnte/sollte an meiner Seite noch schrauben, was die Darstelung auf Handys und Tabletts betrifft?
allgemein, denn ich habe mir deine Seite nicht wirklich angesehen.
Matthias
@@oxo888oxo:
nuqneH
Und die alten IEs müssten dann eben 2 CSS-Datein laden.
Ich denke, damit könnte ich aber leben.
Es ist weitaus problematischer, nicht gewünschte Stilregeln zu überschreiben als diese gar nicht erst zu erstellen.
Deshalb würde ich von einem zusätzliches Stylesheet für alte IEs, welches das Standard-Stylesheet ergänzend überschreibt, abraten. Stattdessen ein getrenntes Stylesheet für alte IEs (bzw. getrennte Stylesheets für verschiedene alte IE-Versionen), das von diesen anstelle des Standard-Stylesheets geladen wird.
Wie gesagt, mit CSS-Präprozessoren ist das schnell gemacht. Ohne nicht! Dann sind Hacks in dem einen Stylesheet für alle Browser der bessere Weg.
Für mich persönlich gilt aber Folgendes:
Ich bin ja eigentlich keiner, der diverse Webseiten baut.
Ich mache jetzt einmal meine Seite und dann ist gut.
Dafür bist du aber sehr ambitioniert.
Qapla'
Es ist weitaus problematischer, nicht gewünschte Stilregeln zu überschreiben als diese gar nicht erst zu erstellen.
Was genau ist daran problematisch?
Sinnigerweise sollte eine überschreibende Regel, wo und wie auch immer sie notiert wird, denselben Selektor verwenden.
Also hat sie dieselbe oder, im Falle von Selektor-Hacks, sogar eine höhere Spezifität. Da sie nach den allgemeinen Regeln geladen wird, überschreibt sie die vorherige.
Das Überschreiben von Deklarationen geht ebenfalls problemlos. Eigenschaften können auf ihre Initialwerte oder inherit gesetzt werden, wenn man sie ungeschehen machen will.
Das einzige Problem, das mir einfällt, ist das Triggern von hasLayout. Wenn irgendeine Eigenschaft hasLayout anschaltet, ist es in einer zweiten Regel m.W. nicht umkehrbar. (Habe dieses Wissen erfolgreich verdrängt – betrifft ja auch nur IE 6-7.)
Ich hatte noch nie Probleme beim Überschreiben von Styles für IEs. Es mag Gründe gegen separate Stylesheets geben, aber diesen halte ich für schwach.
Es erzeugt vielmehr für Konfusion, wenn es zwei Stylesheets gibt, die zu 99% gleich sind, aber im Detail voneinander abweichen. Diese Praxis habe ich noch nirgends gesehen.
Mathias
@@molily:
nuqneH
Es erzeugt vielmehr für Konfusion, wenn es zwei Stylesheets gibt, die zu 99% gleich sind, aber im Detail voneinander abweichen.
Was ist daran konfus, wenn die Stylesheets per Präprozessor aus derselben Quelle generiert werden?
Über das Pflegen mehrerer Dateien sollten wir uns gar nicht weiter unterhalten; das ist zu vermeiden.
Qapla'
Hallo,
Bei zusätzlichen IE-Stylesheets sehe ich im Browser beim Entwickeln sowie beim Debuggen der fertigen Site, ob eine Regel durch das IE-Stylesheet überschrieben wird, ob es sich um browserspezifische Styles handelt oder normale. Zwei Regeln im Style-Inspector zu haben, von denen eine alle standardkonformen Styles enthält und eine die wirren Hacks für den IE, finde ich enorm praktisch. Da nehme ich das bisschen Aufwand bzw. Überschreiben und Zurücksetzen auf mich.
Mathias
@@molily:
nuqneH
Bei zusätzlichen IE-Stylesheets
Mir fällt grad kein gängiger Weg ein, wie man mit Sass aus einer Quelle ein Stylesheet für alle Browser und ein zusätzliches mit den Reglen ausschließlich für alte IEs generieren könnte.
Da man nicht mehrere Quelldateien pflegen möchte, empfinde ich die Diskussion über zusätzlich vs. lagacy-IE-only als müßig.
Qapla'
Nö, eher nicht. Browser laden unabhängig vom media-Attribut alle Stylesheets. Da schreibt man besser alles in eins und hat die Media-Queries im Stylesheet. Mehrere HTTP-Requests vs. einer.
Da muss ich doch mal ganz naiv fragen: Warum tun die Browser das?
Die Angaben im media-Attribut – so sie denn vorhanden sind – stehen da doch nicht zum Spaß, sondern um dem UA mitzuteilen, in welchen Fällen eine bestimmte Stylesheet-Datei benötigt, oder eben nicht benötigt wird.
Warum werden also Dateien geladen, für die noch keine Verwendung besteht?
Im Grunde würde ich erwarten, dass nur die Dateien geladen werden, die gerade benötigt werden. Also solange z.B. der User nicht auf „Drucken“ geht, sollte ein als media="print" deklariertes Stylesheet nicht geladen werden. Und ein Stylesheet mit Angaben zu min-/max-device-width braucht ebenfalls nicht geladen zu werden, solange die Bedingung nicht zutrifft.
Daher die Frage: Gibt es irgendeinen nachvollziehbaren, plausiblen Grund für die Browser, unnötig Dateien anzufordern? (Muss es ja offensichtlich. Scheint mir doch unwahrscheinlich, dass alle Browserentwickler die gleiche Fehlentscheidung getroffen haben)
@@TSO:
nuqneH
Im Grunde würde ich erwarten, dass nur die Dateien geladen werden, die gerade benötigt werden. Also solange z.B. der User nicht auf „Drucken“ geht, sollte ein als media="print" deklariertes Stylesheet nicht geladen werden. Und ein Stylesheet mit Angaben zu min-/max-device-width braucht ebenfalls nicht geladen zu werden, solange die Bedingung nicht zutrifft.
Dann könnte sich das Layout bei Änderung der Viewportgröße (d.h. auch bei Drehen des Smartphones oder Tablets) nicht in Echtzeicht anpassen, sondern es verginge eine gefühlte Ewigkeit, bis das benötigte Stylesheet nachgeladen werden würde.
Die Wartezeit mag bei screen vs. print noch akzeptabel sein, bei min-/max-width ist sie es nicht.
Auch wären künftig noch andere Mediaqueries denkbar, die auf ständig wechselnde Bedingungen reagieren (Bandbreite, Akkuzustand, …)
Daher die Frage: Gibt es irgendeinen nachvollziehbaren, plausiblen Grund für die Browser, unnötig Dateien anzufordern?
Gibt es irgendeinen nachvollziehbaren, plausiblen Grund für die Entwickler, unnötig Dateien zu erstellen?
Qapla'
Dann könnte sich das Layout bei Änderung der Viewportgröße (d.h. auch bei Drehen des Smartphones oder Tablets) nicht in Echtzeicht anpassen, sondern es verginge eine gefühlte Ewigkeit, bis das benötigte Stylesheet nachgeladen werden würde.
So langsam sind auch die Mobilnetze nicht, dass dies wirklich spürbar sein dürfte.
Auch wären künftig noch andere Mediaqueries denkbar, die auf ständig wechselnde Bedingungen reagieren (Bandbreite, Akkuzustand, …)
Auch da würde ich erwarten, dass ein Browser nur die Dateien anfordert, die er auch benötigt.
Gibt es irgendeinen nachvollziehbaren, plausiblen Grund für die Entwickler, unnötig Dateien zu erstellen?
Klar: Bandbreite.
Ich gehe im Normalfall davon aus, dass ein User/Useragent nur die Dateien anfordert, die er benötigt, weil es die logische Entscheidung ist.
Nach deiner Logik könnte man auch den gesamten Webauftritt in eine einzelne große Datei packen. "Warum unnötig Dateien erstellen? Der User braucht sich ja nur den Abschnitt anzusehen, der ihn interessiert".
Ein "wir /könnten/ die Datei eventuell zu einem späteren Zeitpunkt mal benötigen (wenn Freitag der dreizehnte auf Ostern fällt)" ist in meinen Augen jedenfalls kein plausibler Grund. DANN müsste der Browser auch alle Links im Dokument schonmal in den Cache laden, immerhin könnte der Nutzer ja einen davon anklicken. (Ich glaube eine Opera-Version hat das mal gemacht)
@@TSO:
nuqneH
Dann könnte sich das Layout bei Änderung der Viewportgröße (d.h. auch bei Drehen des Smartphones oder Tablets) nicht in Echtzeicht anpassen, sondern es verginge eine gefühlte Ewigkeit, bis das benötigte Stylesheet nachgeladen werden würde.
So langsam sind auch die Mobilnetze nicht, dass dies wirklich spürbar sein dürfte.
Bei (temporärer) Nichtverfügbarkeit sind sie SEHR langsam.
Was, wenn der Nutzer sein Smartphone oder Tablet im Tunnel dreht? Wird der Inhalt dann mit dem nicht mehr passenden Stylesheet angezeigt? Oder wird der Inhalt im Viewport gar gelöscht, bis die Netzverbindung irgendwann mal wieder verfügbar ist?
Auch wären künftig noch andere Mediaqueries denkbar, die auf ständig wechselnde Bedingungen reagieren (Bandbreite, Akkuzustand, …)
Auch da würde ich erwarten, dass ein Browser nur die Dateien anfordert, die er auch benötigt.
Dann kann es zu spät sein, s.o.
Die Verfügbarkeit der Netzverbindung ist eine Gabe, auf die man mit progrssive enhancement aufbauen kann. Sie ist keine gegebene Voraussetzung. Offline first.
Qapla'
Hallo,
Dann könnte sich das Layout bei Änderung der Viewportgröße (d.h. auch bei Drehen des Smartphones oder Tablets) nicht in Echtzeicht anpassen, sondern es verginge eine gefühlte Ewigkeit, bis das benötigte Stylesheet nachgeladen werden würde.
In der Praxis bringt die Änderung der Viewportgröße meistens das Laden von Inhalten mit sich: Seien es angepasste CSS-Hintergrundbilder, picture-Elemente oder sogar Textinhalte, die per Ajax geladen werden, weil mehr Inhalte parallel angezeigt werden können.
Das ist eher ein Feature von Responsive Design als ein Antipattern. Dass der Browser Stylesheets vorlädt, beschleunigt den Wechsel natürlich etwas. Letztlich ist es Abwägungssache: Die Browserhersteller haben sich entschieden, mehr potentiell unnötigen Traffic erzeugen, um die Performance eines bestimmten Anwendungsfalls zu verbessern.
Gibt es irgendeinen nachvollziehbaren, plausiblen Grund für die Entwickler, unnötig Dateien zu erstellen?
Wieso unnötig? Man muss doch hier unterscheiden:
Auf der einen Seite:
Auf der anderen Seite:
Letzteres sind Umstände, die sich eher früher als später mit HTTP 2.0 ändern werden.
Mathias
Hallo,
Warum tun die Browser das?
Gewohnheit – so ist es vermutlich schon immer gewesen.
Gibt es irgendeinen nachvollziehbaren, plausiblen Grund für die Browser, unnötig Dateien anzufordern?
Es gibt gute Gründe dafür, sicherlich, es gibt m.M.n. aber bessere Gründe dafür, sie nicht sofort anzufordern. siehe:
http://forum.de.selfhtml.org/archiv/2014/1/t216255/#m1482412
http://forum.de.selfhtml.org/archiv/2014/1/t216255/#m1482661
Manche Browser optimieren das Laden, indem sie die nicht benutzten Stylesheets zumindest im Hintergrund laden, sodass laufende Requests für direkt benötigte Ressourcen nicht geblockt werden.
Mathias
