Content deleted Content added
m →List of prefixes: Wikilink |
Remove hatnote: no target (WP:HATNOTE) |
||
| (7 intermediate revisions by 6 users not shown) | |||
Line 1:
{{Short description|Coding technique}}
{{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 ===
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.
The following are examples of the different syntax for these comments.
<syntaxhighlight lang="
<head>
<title>Test</title>
Line 26 ⟶ 24:
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]> <![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>
</syntaxhighlight>
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
|-
| <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> ||
|-
| <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.
==References==
Line 145 ⟶ 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
* [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]]
| |||