CSS hack: Difference between revisions

Revision as of 00:23, 29 June 2023

Latest revision as of 19:25, 17 June 2025

(5 intermediate revisions by 5 users not shown)

Line 1:

{{Short description|Coding technique}}

{{hatnote|This article is about a CSS technique. Not to be confused with the proprietary Microsoft-specific CSS property.}}

{{Use dmy dates|date=December 2021}}

A '''CSS hack''' is a [[Computer programming|coding]] technique used to hide or show [[Cascading Style Sheets|CSS]] [[Markup language|markup]] depending on the [[Web browser|browser]], version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the [[W3C]] [[World Wide Web Consortium#Standards|standards]]. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

Line 15 ⟶ 14:

=== Conditional comments ===

{{Main|Conditional comment}}

Prior to version 10, [[Internet Explorer]] supported a special comment syntax that would allow blocks of HTML to be read only by specific versions of the browser. These comments are mostly used to provide specific CSS and JavaScript workarounds to older versions of the browser. No other browsers interpreted these comments or offered similar functionality.

Line 44 ⟶ 42:

! Vendor Prefix !! In Use !! Layout Engine !! Created by !! Used by

|-

| <code>-ah-</code> || {{Yes}} || Formatter || Antenna House || Antenna House Formatter

|-

| <code>-apple-</code> || {{Yes}} || [[WebKit]] || [[Apple Inc.]] || [[Safari (web browser)|Apple Safari 2.0]], Opera Widgets, [[Acid3#Chrome, Presto and WebKit based browsers|WebKit-Based Browsers (as legacy prefix)]]

|-

| <code>-atsc-</code> || || || [[Advanced Television Systems Committee standards]] ||

|-

| <code>-epub-</code> || {{Yes}} || WebKit || [[EPUB|EPUB Working Group]] || [[Chromium (web browser)|Chromium]] / [[Google Chrome]], WebKit-Based Browsers

|-

| <code>-fx-</code> || {{Yes}} || || [[Sun Microsystems]] (now acquired by [[Oracle Corporation]]) || [[JavaFX]] applications

|-

| <code>-hp-</code> || || || [[Hewlett-Packard]] (now [[HP Inc.]] and [[Hewlett Packard Enterprise]]) ||

|-

| <code>-khtml-</code> || {{Yes / yes}} || [[KHTML]] / WebKit || [[KDE]] || KDE [[Konqueror]] / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browsers (as a legacy prefix)

|-

| <code>-moz-</code> || {{Yes}} || [[Gecko (software)|Gecko]] || [[Mozilla Foundation]] || Gecko-Based Browsers[?], Mozilla Firefox

|-

| <code>-ms-</code> || {{Yes}} || [[Trident (layout engine)|Trident]] / MSHTML || [[Microsoft Corporation]] || [[Internet Explorer|Microsoft Internet Explorer]]

|-

| <code>mso-</code> || || Office || Microsoft Corporation || Microsoft Office[?]

|-

| <code>-o-</code> || {{Yes}} || [[Presto (layout engine)|Presto]] || [[Opera Software]] || [[Opera (web browser)|Opera desktop Browser up to version 12.16]], [[Opera Mini]], and [[Opera Mobile|Opera Mobile up to version 12.1]], [[Nintendo DS]] & [[Nintendo DSi]] Browser, Nintendo Wii Internet Channel

|-

| <code>-prince-</code> || {{Yes}} || [[Prince (software)|Prince]] || [[YesLogic]] || YesLogic Prince

|-

| <code>-rim-</code> || || WebKit || [[BlackBerry Limited]] || RIM Blackberry Browser

|-

| <code>-ro-</code> || {{Yes}} || MARTHA || RealObjects || RealObjects PDFreactor

|-

| <code>-tc-</code> || || || TallComponents || TallComponents

|-

| <code>-wap-</code> || {{Yes}} || Presto || [[Open Mobile Alliance|The WAP Forum]] || Opera Desktop Browser and Opera Mobile, The WAP Forum

|-

| <code class=nowrap>-webkit-</code> || yes{{Yes}} || WebKit/Blink || [[Apple Inc.]] ([[WebKit]])/<br/>[[Google|Google Inc.]] ([[Blink (browser engine)|Blink]]) || Apple Safari & Safari for iOS (WebKit), Chromium / Google Chrome desktop and mobile (Blink), Opera desktop and mobile from version 14 (Blink), Android browser (Blink), [[Nokia]] MeeGo Browser 8.5, Nokia [[Symbian]] Browser 7.0 and later (WebKit), Blackberry Browser 6.0 and later (WebKit).

|-

| <code>-xv-</code> || {{No}} || Presto || Opera Software || Opera Desktop Browser for Windows 2000/XP

|}

Line 130 ⟶ 128:

=== Script polyfills ===

While JavaScript feature detection and <syntaxhighlight lang="CSS" inline>@supports</syntaxhighlight> rules can help to target browsers that require fallback functionality, they will not address bugs in specific browsers or enable that advanced functionality. [[Polyfill (programming)|Polyfills]], scripts that make behavior consistent across all browsers, can be used to add support for new CSS rules (for example, [[media queries]] in IE 8) as well as fix bugs in specific browsers. Since polyfills add or fix functionality in browsers that do not have it, they serve a different purpose than feature queries, but can be used in combination with them.

* [[Conditional comment]]s

==References==

Line 144 ⟶ 141:

* [https://web.archive.org/web/20070715175654/http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html Filters and Cross-Over] – CSS filters. Parsing errors marked red.

* [http://rafael.adm.br/css_browser_selector – CSS Browser Selector] – Allows to combine browser specific CSS in single stylesheet (using JavaScript).

* [https://web.archive.org/web/20110720143842/http://www.positioniseverything.net/articles/cc-plus.html – #IEroot] – Targeting IE with a single stylesheet containing all CSS (without using JavaScript, but using conditional comments to assign browser-specific tag to arbitrary content root [{{Tag|div]|o}})

* [https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet How to target only IE (any version) within a stylesheet?] – discussion on [[StackOverflow]]

* [https://stackoverflow.com/questions/11173106/apply-style-only-on-ie Apply style ONLY on IE] – discussion on [[StackOverflow]]