Dieser verdammt saftige CSS-Trick existiert schon eine ganze Weile, aber ich wollte ihm einen eigenen Beitrag widmen, um die gute Nachricht erneut zu verbreiten.
Oft denken wir, dass Inline-Styles dazu da sind, Styles zu überschreiben, die wir im CSS festgelegt haben. 99% der Zeit ist das auch der Fall, und es ist sehr praktisch. Aber es gibt Umstände, unter denen Sie es umgekehrt tun müssen. Das heißt, es gibt Inline-Styles in einigen Markups, die Sie absolut nicht entfernen können, aber Sie müssen diese Styles überschreiben. Dies könnte Markup sein, das von fremdem JavaScript auf die Seite eingefügt wird, oder vielleicht von einem CMS generiert wird, das Sie nicht einfach kontrollieren können.
Glücklicherweise KÖNNEN wir Inline-Styles direkt aus dem Stylesheet überschreiben. Nehmen wir dieses Beispiel-Markup
<div style="background: red;">
The inline styles for this div should make it red.
</div>Damit können wir kämpfen
div[style] {
background: yellow !important;
}Andere Orte, an denen dies geteilt wurde
Soh Tanaka, Natalie Jost
Wow, das wusste ich nicht, könnte es aber definitiv gebrauchen. Wir haben ein paar Kunden, die ihre Websites mit Adobe Contribute bearbeiten und am Ende nicht genehmigte Farben oder Stile verwenden – das würde das definitiv überschreiben.
Cool. Aber das funktioniert nicht für IE6.
Warum IE6 benutzen. Es ist ein Browser, der fast 9 Jahre alt ist….
Toller Tipp übrigens :)
Ich stimme zu, ich mag IE6 nicht… aber versuchen Sie, das den CIOs/CTOs großer Unternehmen zu sagen, wo die Mehrheit der Benutzer IE6 verwendet.
Das ist genau mein Gefühl, jedes Mal, wenn ich jemanden lese, der IE6 komplett abtut.
Wenn ein großes Unternehmen seine Benutzer nicht upgraden kann/will – und diese Benutzer zufällig Kunden dieses Unternehmens sind (z. B. bei einem Finanzdienstleister) –, dann kann der Prozentsatz von IE6 drastisch höher sein, als Statistikseiten oft berichten.
Ich muss John und Greg zustimmen. Eine Aussage wie „dann benutz ihn nicht“ fliegt bei mir nicht – denn ich benutze ihn NICHT – die wenigsten Designer/Entwickler benutzen ihn (zum Surfen, zum Testen natürlich). Wir haben jedoch Kunden, die IE6 verwenden. Johns Beispiel ist zu 100% zutreffend. Ich habe ein großes Energieunternehmen als Kunden, und alle seine Mitarbeiter sind auf IE6 beschränkt/festgefahren, und das wird voraussichtlich noch mindestens ein weiteres Jahr so bleiben.
Daher funktioniert das Argument „benutz ihn nicht“ wirklich nicht.
Es ist möglich, mehr als einen Browser auf einem System zu installieren. Benutzen Sie IE6 für Ihre alten Softwaresysteme und Chrome/Firefox für alles andere.
Außerdem ist es egal, ob dieser Trick in IE6 nicht funktioniert… sie sind es gewohnt, seltsame Dinge auf Websites zu sehen, wenn sie IE6 regelmäßig nutzen.
Zu sagen „funktioniert nicht in IE6“ ist genauso nervig wie zu sagen „benutz ihn nicht“.
Einfach. Sagen Sie ihnen, dass dies zu Produktivitätsverlusten führt, da es keine zeiteffizienten Funktionen wie Tabs unterstützt. Erfinden Sie einige Zahlen, die „beweisen“, dass sie 500.000 US-Dollar pro Jahr an verlorener Produktivität verlieren. Bieten Sie dann Ihre Beratungsdienste an und aktualisieren Sie ihre Systeme.
Der häufigste Grund, warum ein Unternehmen sich weigert, von IE6 zu wechseln, ist, dass es an ein System oder eine Software gebunden ist, die nur mit IE6 funktioniert. Die Kosten für die Aktualisierung der Infrastruktur sind in der Regel prohibitiv hoch – definitiv höher als die Kosten für Produktivitätsverluste.
Ich mag die Idee nicht, meine Kunden zum eigenen Vorteil anzulügen.
Kürzlich habe ich mir die Statistiken für eine Website angesehen, die ein breites Publikum haben sollte – ein großes Musikereignis –, und festgestellt, dass IE6 einen größeren Anteil hatte als alle Versionen von Firefox.
Wenn man diese Ergebnisse interpretiert, ist es wichtiger, IE6 als Firefox zu unterstützen.
Bobby van der Sluis hat eine nette JS-Funktion, die Inline-Styles vermeidet; es ist nicht immer möglich, besonders wenn man eine Bibliothek verwendet.
Als ich kürzlich die Google Analytics meiner Website sah, waren 40% davon IE6-Nutzer. Es ist traurig, aber wir müssen mindestens noch ein Jahr lang mit IE6-Nutzern im Hinterkopf arbeiten.
Meine Statistiken für den letzten Monat? 66,49 % mit IE6, da unser Hauptkunde ein großes Unternehmen ist, das derzeit nicht bereit ist zu upgraden. Da kann man nicht viel machen, und schon gar nicht kann man das einfach ignorieren…
Dann können sie mit dem hässlichen Styling leben.
Ich kann die Entscheidung von Unternehmen/Kunden, IE6 zu verwenden, nicht wirklich verstehen. Ich respektiere ihr Recht zu sagen, als Kunde: „Wir benutzen X“, aber dennoch.
Es verwirrt mich einfach – neuere Browser sind sicherer und schneller. Was ist die Begründung, bei IE6 zu bleiben, außer „Das ist, was wir benutzen“?
Das ist die ganze Mentalität von Großunternehmen. Betrachten Sie zum Beispiel das Folgende
Wie viele Oxford-Alumni braucht man, um eine Glühbirne zu wechseln?
„ÄNDERN?!“
Das Problem ist, dass viele Verbraucher nicht so Web-affin sind wie die, die auf Seiten wie dieser posten. Sie wissen nicht, dass sie upgraden sollen oder wie sie upgraden sollen. Es ist scheiße, aber es ist Teil des Lebens. Die beste Lösung ist, die Dinge einfach zu halten.
Ich sprach kürzlich mit Freunden, die für große Banken/Anwaltskanzleien arbeiten, und sie schienen zu verstehen, dass ihre Unternehmen interne Systeme haben, die außerhalb von IE6 nicht funktionieren. Meine Vermutung war, dass es sich um browserbasierte/intranetbasierte Lösungen handeln könnte, die auf so rückwärtsgewandte Weise entwickelt wurden, dass sie in neueren Browsern einfach nicht „richtig“ funktionieren.
Ja, das ist sehr gut möglich. Es ist nicht so, dass diese Unternehmen, selbst die langsamen und nicht technikaffinen, IE6 *verwenden wollen*, sondern dass sie weitgehend gefangen sind. Es gibt viele Geschäfts- und Unternehmenssoftware, die mit Nicht-IE6-Browsern inkompatibel sind, meist proprietäre Software, in die diese Unternehmen stark investiert haben und die für ihren täglichen Betrieb unerlässlich ist.
Die Aktualisierung dieser Software würde erhebliche finanzielle und zeitliche Investitionen erfordern und wahrscheinlich auch betriebliche Änderungen. Daher ist es für sie nicht praktikabel, ein Upgrade durchzuführen. Sie werden also keine flächendeckenden Rollouts aktualisierter Browser sehen, und viele der Unternehmen müssen möglicherweise eine „Kein IE-Upgrade“-Richtlinie durchsetzen, um sicherzustellen, dass alle ihre Mitarbeiter Zugang zur relevanten Software haben. Sicher, Mitarbeiter können einzelne alternative Nicht-IE-Browser installieren, aber wenn IE6 der geforderte Unternehmensstandard ist, werden die meisten von ihnen ihn am Arbeitsplatz beibehalten.
Ich stimme der Aussage Ihrer Freunde zu.
Ich arbeite für ein Unternehmen, das genau in dieser Situation feststeckt. Viele Online-Live-Systeme werden in IE6 visualisiert, hauptsächlich aus zwei Gründen
1) Keine Zeit für die Entwickler, sich an andere Browser anzupassen (selbst wenn sie es möchten)
1a) Die Chefs: „Nun, es funktioniert – na und? Es ist nur Intranet“. Anstatt neue Browser usw. zu installieren. Es ist Zeitverschwendung und IT-Sicherheit, Firewalls usw. Mit anderen Worten, ändere nie ein laufendes System – es sei denn, es gab einen Big Bang…
2) Hinzu kommt: Standardisierung, …
Ein No-Go: unterschiedliche Browser: zu viel für die Administratoren, sie sind bereits am Limit bei der Bereitstellung aller standardisierten Softwarepakete.
Anstatt fortzufahren
Als Webdesigner arbeite ich im Land der Verzweiflung. Die einzige Hoffnung: Irgendwann wird der Oberste Gerichtshof entscheiden.
Schluck es oder hör auf, Verträge mit Kunden abzuschließen, die IE6 wollen – aber hör bitte auf zu jammern. Ich kann es nicht mehr ertragen…
Am Ende ist es immer: „Geld spricht und …… Kot geht“
Ob es uns gefällt oder nicht, ist nicht die Frage! Können wir es ändern? Oder wird die Zeit es für uns ändern?
b r
unregistered
Frieden !!!
Du verrückter Mistkerl! Ich liebe es.
Ja, Attributselektoren werden von IE 6 überhaupt nicht geliebt (und für diejenigen, die sagen, warum IE 6 benutzen, nun, Sie verstehen es einfach nicht…)
Immer noch ein guter Tipp/Trick.
IE6-Nutzer müssen dann einfach mit einem roten Hintergrund leben.
Genau.
Yep–
Nur weil etwas nicht im rückständigen IE6 funktioniert, heißt das nicht, dass es nicht verwendet werden sollte… besonders in diesem Fall, wo die Verwendung oder Nichtverwendung zum gleichen Ergebnis in IE6 führt, aber ein besseres Ergebnis in IE7+.
Das ist eine Selbstverständlichkeit…
Das ist es, wofür CSS-Tricks steht! Immer weiter so!
Toller Beitrag, danke :)
Habe eine Frage: Wenn ich den Text in diesem Artikel auswähle, wird der Text mit rotem Hintergrund ausgewählt. Wie passiert das?? Das sieht wirklich beeindruckend aus..
danke
Ich habe diesen Code im Stylesheet gefunden:
*::-moz-selection {background:#FE4902 none repeat scroll 0 0;
color:white;
}
und wenn Sie auf dieser Seite nach „*text selection*“ suchen, finden Sie… einen weiteren schönen Trick! :)
Sie können Inline-CSS immer mit „!important“ überschreiben, das zu Ihrem externen Stylesheet hinzugefügt wird. Funktioniert in jedem Browser.
Ich glaube das nicht. Wenn Sie einen Testfall haben, den Sie präsentieren können, wäre ich interessiert, ihn zu sehen.
Das Schlüsselwort !important erstellt einen separaten, zweiten Vererbungsbaum. Eine !important-Deklaration überschreibt alle anderen Deklarationen, egal ob verlinkt, blockiert oder inline… außer allen anderen !important-Deklarationen, die darunter liegen! :)
Hier ist die Erklärung der Spezifikation dazu.
Probieren Sie es selbst aus!
style.css
p { color: red !important; }test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" href="./style.css" type="text/css" media="screen">
<title>Testen der CSS-Vererbung mit !important</title>
<style type="text/css">
p {
font-weight: bold;
}
</style>
</head>
<body>
<p style="color: blue; font-weight: normal;">Testen</p>
</body>
</html>
Ich habe also eine Testseite erstellt
https://css-tricks.de/examples/OverrideInlineStyle/index.html
Die Quintessenz ist JA, der !important-Teil erledigt die Arbeit von allein. Er ist NICHT erforderlich, um den Inline-Style zu überschreiben. Und tatsächlich führt dieser [style]-Attributselektor dazu, dass er in IE 6 NICHT funktioniert.
Der [style]-Attributselektor ist jedoch immer noch nützlich, um nur bestimmte Elemente mit Inline-Styling auszuwählen und Elemente, die keine haben, zu ignorieren, was äußerst nützlich sein kann.
Interessanterweise wird die zweite Box in Ihrem Beispiel-Link für mich in Safari 4 (öffentliche Beta) mit rotem Hintergrund angezeigt. Die anderen beiden Beispiele funktionieren hervorragend. Sie sollten die !important-Direktive als Update für diesen Beitrag aufnehmen, für diejenigen von uns, die das Pech haben, IE6 ertragen zu müssen (und aus irgendeinem traurigen Grund auch Safaris mangelnde Unterstützung für diese Überschreibung).
Diese Demo funktioniert in IE7 nicht
Ja, die zweite scheint auch in meinem Firefox (3.0.10) rot zu sein.
Ich habe eine schnelle Frage dazu. Nehmen wir an, aus irgendeinem Grund haben Sie 2 divs auf derselben Seite mit Inline-Styling. Würde dies beide divs überschreiben? Wenn ja, wie würden Sie nur eines und nicht das andere ansprechen?
Mit Klassen oder IDs oder wie auch immer Sie dieses div sowieso auswählen würden.
Diese Lösung funktioniert nicht in IE, in keiner Version. Ich habe den Test auch in IE8 gemacht.
Doch, das tut es.
Posten Sie den Test, schauen wir mal.
Es funktioniert, wenn IE7 und IE8 im Standard-Compliance-Modus sind, was Sie mit einem korrekten DOCTYPE erzwingen können. Wenn Sie Ihre HTML-Testdokumente mit
<html>beginnenversuchen Sie, sie mit
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">oder
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Hallo James,
es funktioniert immer noch nicht, kannst du mir helfen?
Mein Code ist
Wie man Inline-Styles mit Style Sheet überschreibt
div[style] { background: yellow !important;}
Die Inline-Styles für dieses div sollten es rot machen.
Code
print("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Wie man Inline-Styles mit Style Sheet überschreibt
div[style] { background: yellow !important;}
Die Inline-Styles für dieses div sollten es rot machen.
„);
Für IE6 (The Little Blue) entfernen Sie nur „[style]“.
Ich weiß nicht, worüber Sie alle reden, der !important-Tag funktioniert in IE6 einwandfrei. Ich habe sogar versucht, den doctype zu entfernen, und es funktioniert trotzdem in IE6. Ich teste es in einer vollwertigen Version von IE6, nicht in einem Tester (IETester, etc.).
Ich muss sie ständig bei meinem Vollzeitjob verwenden (ich arbeite für Belo Interactive, das neuntgrößte Medienunternehmen des Landes [sie besitzen eine Menge Nachrichtenseiten]), und es gibt Kunden/„Site-Manager“ bei einer Reihe unserer Nachrichtenseiten, die versuchen, ihre eigene Arbeit zu machen, was alles mit Inline-Styles, Tabellen und dem schrecklichsten Mist, den Sie je gesehen haben, kaputt macht. Ernsthaft, das lässt Jesus weinen.
Ja, ich kenne das [style] in Ihrem CSS nicht. Wofür ist das gut? Es wird nicht benötigt.
Das Beispiel verwendet [style] (den Attributselektor), um uns zu zeigen, dass das CSS auf das div mit dem Attribut „style“ abzielt. Sie könnten auch eine Klasse oder eine ID verwenden. Normalerweise möchten Sie nicht nur „div“ – es sei denn, Sie möchten einen gelben Hintergrund für jedes div auf der Seite?
Obwohl es vielleicht eine schlechte Beispielwahl war, da Leute, die CSS nicht kennen, es versuchen und sich dann wundern, warum es in alten Browsern nicht funktioniert.
Für diejenigen, die sagen, es funktioniert in IE6, denken Sie daran, dass IE6 einen Fehler hat, bei dem alles nach der !important-Deklaration gezählt wird (statt wie erwartet überschrieben zu werden). Sie müssen also in IE6 trotzdem vorsichtig damit sein.
Ich bin ein Fan von rein altmodischem „!important“, das jeden Inline-Style überschreibt, ohne die Attributbereiche [style] zu verwenden. Ich bin mir nicht sicher, warum Sie es überhaupt verwenden würden, da es in IE6 fehlerhaft ist.
Ja, ich würde einfach das !important-Tag verwenden und dem div eine Klasse oder ID geben, oder übersehe ich etwas?
Danke! Sie haben mich heute gerettet. Ein Drupal-Modul oder ein Update hat ein „display:none“ in ein Inhaltsfeld eingefügt und ich konnte es wieder sichtbar machen. Ich muss noch herausfinden, warum, aber es ist wieder da.
Vielen Dank! Ich liebe es, diese Art von Tricks zu lernen!
Wirklich schöne Tipps. Danke.
Wirklich genialer Trick, Chris!
Ich denke, Sie sollten den Zweck von „[style]“ klären und erwähnen, dass das *Überschreiben* auch ohne ihn funktioniert..
Danke! Sehr hilfreich :)
Danke für den Tipp, ich werde ihn sicher bald benutzen :)
Es kann auch ohne „[style]“ funktionieren.
Ja, ich würde einfach das !important-Tag verwenden und dem div eine Klasse oder ID geben, oder übersehe ich etwas?
Die „!important“-Regel funktioniert tatsächlich einwandfrei in IE6… funktioniert aber, wie bei anderen Browsern, nur, wenn sie auf die letzte Instanz der ID oder Klasse im Stylesheet oder Override angewendet wird.
Beispiel;
Wenn Ihr Stylesheet eine Klasse wie folgt definiert hat
.header{
background-color: red „!important“;
}
und später in Ihrem Stylesheet eine weitere Instanz haben, wo Sie dieselbe Klasse wie folgt definieren
.header{
background-color: #f1f1f1;
}
dann wird der Browser #f1f1f1 anstelle von rot verwenden, obwohl „!important“ auf rot angewendet wurde.
Wenn ich sie verwende, versuche ich, sie am Ende des Stylesheets hinzuzufügen, um Konflikte zu vermeiden.
Warum sollte man überhaupt Inline-Styles verwenden? Unordentlich.
Leider verwenden die meisten WYSIWYG-Editoren Inline-Styles.
Perfekte Zeit.
Ich style eine Seite, die etwas aus den 90ern ähnelt, und ich kann den HTML-Code derzeit nicht anfassen. Das steht im Markup
<font size="-2" color="red"> :: events</font>
Ich war überrascht, dass das funktionierte, aber es tat es
font[color]{color:green;}
Das ist ein Test, funktioniert das?
Das sollte funktionieren, aber ein paar Anmerkungen: Es funktioniert nicht in IE6… Ich bin mir nicht sicher, ob andere Versionen Attributselektoren unterstützen. Außerdem ändert das die Farbe jedes Fonts mit einem „color“-Attribut. Wenn es also andere Bereiche im Markup gibt, die diese enthalten, werden sie auch vom font[color]-Selektor angesprochen. Ich hatte ein Problem, bei dem diese Methode mir viel Arbeit erspart hätte, wenn ich keine Kompatibilität mit IE6 hätte hätte.
Sehr nützlich, danke!
So einfach, toller Tipp, ich wusste gar nicht, dass man Inline-Styles überhaupt überschreiben kann, sehr praktisch, direkt im Stylesheet zu überschreiben. Danke!!!
Das ist, was jeder CSS-Experte wissen sollte.
Kleine Tricks können die Welt reibungslos verändern, nette Tricks – danke.
Ich habe die Kommentare tatsächlich mehr genossen als den Beitrag ;)
Danke trotzdem für das Teilen des Wissens/Reichtums :)
schöner Trick, aber hoffe, ich brauche ihn nicht
Großartig, danke für den Rat
Sehr nützlich. Meine Programmierer schreiben immer Inline-Styles. Das wird mir helfen, sie schnell zu finden und zu beheben. Danke Mann :) Großartige ARBEIT
Anscheinend kann man in IE7 einen Inline-Style mit einem globalen Style überschreiben. Das „!important“ ist für andere Browser erforderlich.
p {text-indent:0px; text-indent:0px !important;}
Inhalt kommt hier…
Danke! Das hat so reibungslos funktioniert, dass es schon fast unheimlich ist. Ich brauchte das, weil Meta Slider und/oder Flexslider eine Art Verschlüsselung haben müssen, denn ich habe alle ihre Dateien durchsucht, um ein Div-Tag zu finden, das nur die Entwicklertools des Browsers finden können – es ist einfach nicht in den Dateien als Div-Tag, sondern offensichtlich etwas anderes. Und ich musste den Inline-Style dieses Div-Tags von height: 0px; auf height: 230px; überschreiben. Und nachdem ich den Entwickler des Meta Slider Plugins nach dem Speicherort dieses mysteriösen Div-Tags gefragt hatte, erhielt ich bisher keine Antwort. Aber ich bin froh, dass ich Ihre Seite gefunden habe. Das war die Antwort. Nochmals vielen Dank.
Beeindruckend! Ich hatte keine Ahnung, dass man das tun kann. Danke!
Wie man Inline-Styles auf einer Website sucht… Irgendwelche Hilfe?