Skip to content

Commit

Permalink
Remove documentation of IE-only CSS properties (#24793)
Browse files Browse the repository at this point in the history
  • Loading branch information
queengooborg authored Feb 24, 2023
1 parent f6a1e4b commit 62c5c3f
Show file tree
Hide file tree
Showing 15 changed files with 4 additions and 422 deletions.
4 changes: 0 additions & 4 deletions files/en-us/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -731,7 +731,6 @@
/en-US/docs/CSS/image() /en-US/docs/Web/CSS/image/image
/en-US/docs/CSS/image-orientation /en-US/docs/Web/CSS/image-orientation
/en-US/docs/CSS/image-rendering /en-US/docs/Web/CSS/image-rendering
/en-US/docs/CSS/ime-mode /en-US/docs/Web/CSS/ime-mode
/en-US/docs/CSS/inherit /en-US/docs/Web/CSS/inherit
/en-US/docs/CSS/inheritance /en-US/docs/Web/CSS/inheritance
/en-US/docs/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/inheritance
Expand Down Expand Up @@ -1040,7 +1039,6 @@
/en-US/docs/CSS:font-weight /en-US/docs/Web/CSS/font-weight
/en-US/docs/CSS:height /en-US/docs/Web/CSS/height
/en-US/docs/CSS:hidden /en-US/docs/Web/CSS/visibility
/en-US/docs/CSS:ime-mode /en-US/docs/Web/CSS/ime-mode
/en-US/docs/CSS:inherit /en-US/docs/Web/CSS/inherit
/en-US/docs/CSS:inheritance /en-US/docs/Web/CSS/inheritance
/en-US/docs/CSS:inherited_and_non-inherited_properties /en-US/docs/Web/CSS/inheritance
Expand Down Expand Up @@ -11103,7 +11101,6 @@
/en-US/docs/Web/CSS/-moz-zoom-out /en-US/docs/Web/CSS/cursor
/en-US/docs/Web/CSS/-ms-grid-columns /en-US/docs/Web/CSS/grid-template-columns
/en-US/docs/Web/CSS/-ms-grid-rows /en-US/docs/Web/CSS/grid-template-rows
/en-US/docs/Web/CSS/-ms-high-contrast /en-US/docs/Web/CSS/@media/-ms-high-contrast
/en-US/docs/Web/CSS/-ms-scroll-snap-type /en-US/docs/Web/CSS/scroll-snap-type
/en-US/docs/Web/CSS/-ms-text-size-adjust /en-US/docs/Web/CSS/text-size-adjust
/en-US/docs/Web/CSS/-ms-user-select /en-US/docs/Web/CSS/user-select
Expand Down Expand Up @@ -11312,7 +11309,6 @@
/en-US/docs/Web/CSS/Interactive /en-US/docs/Web/CSS/@media
/en-US/docs/Web/CSS/Layout_cookbook/Recipe:_Media_Objects /en-US/docs/Web/CSS/Layout_cookbook/Media_objects
/en-US/docs/Web/CSS/List_of_Proprietary_CSS_Features /en-US/docs/Web/CSS/Reference
/en-US/docs/Web/CSS/Microsoft_CSS_extensions /en-US/docs/Web/CSS/Microsoft_extensions
/en-US/docs/Web/CSS/Motion_Path /en-US/docs/Web/CSS/CSS_Motion_Path
/en-US/docs/Web/CSS/Other_Resources /en-US/docs/Web/CSS
/en-US/docs/Web/CSS/Reference/Mozilla_Extensions /en-US/docs/Web/CSS/Mozilla_Extensions
Expand Down
51 changes: 0 additions & 51 deletions files/en-us/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -76922,21 +76922,6 @@
"connorshea"
]
},
"Web/CSS/@media/-ms-high-contrast": {
"modified": "2020-12-14T10:53:35.458Z",
"contributors": [
"rachelandrew",
"sideshowbarker",
"pankajpurke05",
"wbamberg",
"mfuji09",
"ericwbailey",
"WebMechanic",
"ExE-Boss",
"mfluehr",
"jameshkramer"
]
},
"Web/CSS/@media/-webkit-animation": {
"modified": "2020-10-15T21:36:40.513Z",
"contributors": [
Expand Down Expand Up @@ -79838,18 +79823,6 @@
"BenoitL"
]
},
"Web/CSS/Microsoft_Extensions": {
"modified": "2020-07-16T08:38:36.303Z",
"contributors": [
"wbamberg",
"mfuji09",
"ExE-Boss",
"erikadoyle",
"jameshkramer",
"jswisher",
"mfluehr"
]
},
"Web/CSS/Mozilla_Extensions": {
"modified": "2020-08-09T13:09:17.030Z",
"contributors": [
Expand Down Expand Up @@ -86915,30 +86888,6 @@
"estelle"
]
},
"Web/CSS/ime-mode": {
"modified": "2020-10-15T21:06:19.171Z",
"contributors": [
"wbamberg",
"Sheppy",
"fscholz",
"mfluehr",
"momdo",
"erikadoyle",
"Tigt",
"LouisLazaris",
"Sebastianz",
"RahulKapuriya12692",
"kscarfone",
"teoli",
"ethertank",
"myakura",
"grendel",
"Jürgen Jeka",
"Mgjbot",
"BobChao",
"BijuGC"
]
},
"Web/CSS/inherit": {
"modified": "2020-10-15T21:05:21.625Z",
"contributors": [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ The **`-moz-device-pixel-ratio`** Gecko-only [CSS](/en-US/docs/Web/CSS) [media f

> **Warning:** Do not use this feature. Use the [`resolution`](/en-US/docs/Web/CSS/@media/resolution) feature with the `dppx` unit instead.
> **Note:** This media feature is also implemented by Webkit and by [IE 11 for Windows Phone 8.1](<https://msdn.microsoft.com/library/ie/dn760733(v=vs.85).aspx>) as `-webkit-device-pixel-ratio`. The min and max prefixes as implemented by Gecko are named `min--moz-device-pixel-ratio` and `max--moz-device-pixel-ratio`; but the same prefixes as implemented by Webkit are named `-webkit-min-device-pixel-ratio` and `-webkit-max-device-pixel-ratio`.
> **Note:** This media feature is also implemented by WebKit as `-webkit-device-pixel-ratio`. The min and max prefixes as implemented by Gecko are named `min--moz-device-pixel-ratio` and `max--moz-device-pixel-ratio`; but the same prefixes as implemented by Webkit are named `-webkit-min-device-pixel-ratio` and `-webkit-max-device-pixel-ratio`.
## Syntax

Expand Down
96 changes: 0 additions & 96 deletions files/en-us/web/css/@media/-ms-high-contrast/index.md

This file was deleted.

1 change: 0 additions & 1 deletion files/en-us/web/css/@media/prefers-contrast/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ This example has an annoying low contrast by default.

## See also

- Microsoft [-ms-high-contrast](<https://docs.microsoft.com/previous-versions/hh771830(v=vs.85)>) media feature
- CSS [forced-colors](/en-US/docs/Web/CSS/@media/forced-colors) media query

{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ input[type="file"]::file-selector-button:hover {
## See also

- [WebKit CSS extensions](/en-US/docs/Web/CSS/WebKit_Extensions)
- [Microsoft CSS extensions](/en-US/docs/Web/CSS/Microsoft_Extensions)
- [File and Directory Entries API](/en-US/docs/Web/API/File_and_Directory_Entries_API)
- [File and Directory Entries API support in Firefox](/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support)
- [`<input type="file">`](/en-US/docs/Web/HTML/Element/input/file)
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,9 @@ In Spring of 2017, we saw for the first time a major specification like Grid bei

CSS Grid Layout is unprefixed in all modern browsers. Support for all the properties and values detailed in these guides is interoperable across browsers. This means that if you write some Grid Layout code in Firefox, it should work in the same way in Chrome. This is no longer an experimental specification, and you are safe to use it in production.

## The Internet Explorer and Edge situation

It should be remembered that the original implementation of CSS Grid Layout happened in Internet Explorer 10. This early specification did not contain all of the properties and values that the up-to-date specification has. There are also substantial differences between what shipped in IE10 and the current specification, even where the properties and values appear the same. This early implementation is also the version of Grid Layout implemented in Edge up to version 15.

The IE/Edge (≤15) version of the specification is prefixed with an `-ms` prefix and the properties implemented in IE/Edge (≤15) are as follows:

- {{cssxref("grid-template-columns")}} as `-ms-grid-columns`
- {{cssxref("grid-template-rows")}} as `-ms-grid-rows`
- {{cssxref("grid-row-start")}} as `-ms-grid-row`
- {{cssxref("grid-column-start")}} as `-ms-grid-column`
- {{cssxref("align-self")}} as `-ms-grid-row-align`
- {{cssxref("justify-self")}} as `-ms-grid-column-align`

The IE version has additional properties not required in the new specification of `-ms-grid-column-span` and `-ms-grid-row-span`. This version does not include auto-placement capability, or grid template areas. Some simple grid layouts could be implemented for IE10, through to Edge 15, using the `-ms` properties. As these properties are vendor prefixed, they will not effect any browser supporting the up to date and unprefixed specification.

### Autoprefixer grid layout support

If you are still supporting Internet Explorer, the popular tool _[Autoprefixer](https://github.com/postcss/autoprefixer)_ has been updated to support the `-ms-` grid version. By default, grid prefixes are disabled, but you can enable it with `grid: true` option.

```js
autoprefixer({ grid: "autoplace" });
```

Grid prefixes are disabled by default because some properties can't be prefixed.

## Is it safe to use CSS grids for my layout?

Yes. As with any front-end technology choice, the decision to use CSS Grid Layout will come down to the browsers your site visitors are typically using. If your site serves a market sector that is tied to older browsers, you may consider the above `-ms-` fallback for IE.
Yes. As with any front-end technology choice, the decision to use CSS Grid Layout will come down to the browsers your site visitors are typically using.

## Starting to use Grid in production

Expand Down Expand Up @@ -413,6 +388,4 @@ You can also use multiple column layout as your legacy browser plan, as the `col
## Further reading

- For an excellent explanation of feature queries, and how to use them well, see [Using Feature Queries in CSS (2016)](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/).
- A write-up of the differences between the IE/Edge (≤15) Grid implementation and the modern implementation, also covering _autoprefixer_ support, take a look at: _[Should I try to use the IE implementation of CSS Grid Layout? (2016)](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/)_
- [Autoprefixer and Grid Autoplacement support in IE](https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie)
- [CSS Grid and the New Autoprefixer (2018)](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/)
96 changes: 0 additions & 96 deletions files/en-us/web/css/ime-mode/index.md

This file was deleted.

Loading

0 comments on commit 62c5c3f

Please sign in to comment.