Heim >Web-Frontend >CSS-Tutorial >Was bedeutet Hack in CSS?
Was bedeutet Hack in CSS?
- 清浅Original
- 2018-12-07 16:36:4710883Durchsuche
Der CSS-Hack besteht darin, verschiedene CSS-Stile für verschiedene Browser und Versionen zu schreiben, damit der gewünschte Seiteneffekt dargestellt werden kann.
Der CSS-Hack wird hauptsächlich zur Lösung der Browserkompatibilität verwendet Probleme, Sie können unterschiedliche CSS für verschiedene Browser schreiben und Sie können auch die gewünschten Seiteneffekte in verschiedenen Browsern erzielen. Heute werde ich Ihnen im Artikel ausführlich vorstellen, was ein Hack ist
[Empfohlen Kurse: CSS-Tutorial]
Definition von Hack:
Hack wird durch Browser verschiedener Hersteller verursacht, wie Internet Explorer, Firefox, Chrome usw., oder durch Browser desselben Herstellers. Verschiedene Versionen unterstützen CSS unterschiedlich Daher sind auch die generierten Seiteneffekte unterschiedlich. Zu diesem Zeitpunkt müssen wir unterschiedliche CSS für verschiedene Browser schreiben, damit sie gleichzeitig mit verschiedenen Browsern kompatibel sind und in verschiedenen Browsern verwendet werden können im Browser. Mit anderen Worten: Der Zweck des Hackens besteht darin, Ihren CSS-Code mit verschiedenen Browsern kompatibel zu machen
Beispiel: Wenn wir CSS3-Attribute schreiben, müssen wir oft unterschiedliche Codes für verschiedene Browser schreiben, wie unten gezeigt
animation:5s;/*标准版*/ -moz-animation: 5s;/* Firefox */ -webkit-animation:5s;/* Safari 和 Chrome */ -o-animation:5s;/* Opera */
!important Problem:
Es gibt ein Problem mit der !important-Kennung in Internet Explorer 6 und niedriger, wenn ein anderer Stil mit demselben Attribut im gleichen Stil erscheint Deklarationsblock führt dazu, dass der Bezeichner ignoriert wird. Dies kann verwendet werden, um spezielle Eigenschaftswerte bereitzustellen, die Internet Explorer 6 und andere Browser ignorieren. Dieses Problem besteht jedoch nicht in Internet Explorer 7 und höher
p
{
background: green !important;
background: red;
}
</style>
</head>
<body class="page-body">
<p>Test</p>Wir können die IE-Version über das F12-Debugging-Tool im IE-Browser wechseln, um den laufenden Effekt zu sehen
Auf IE5:
Auf IE8:
*HTML-Problem
Der Hack-Teil von Der Code wird durch ein Sternchen „*“ gefolgt von „html“ dargestellt. Dies ist eine Kombination aus einem Universalselektor und einem Elementtypselektor. Irgendwann haben diese beiden Selektoren zusammen vor einem anderen Selektor nur in einigen niedrigeren Browserversionen eine Wirkung, in anderen Browsern jedoch keine Wirkung. Obwohl es keine Auswirkung hat, wird dennoch kein Fehler gemeldet, da es tatsächlich
*html p
{
background: green;
background: red;
}
</style>
</head>
<body class="page-body">
<p>Test</p>auf IE5 wirksam ist:
auf IE8:
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass jeder durch diesen Artikel ein gewisses Verständnis für Hacks erlangen kann
Das obige ist der detaillierte Inhalt vonWas bedeutet Hack in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!