Instantly share code, notes, and snippets.

@y0ssar1an /bad_css
Last active Jul 25, 2018

Embed
What would you like to do?
Non-standard and Obsolete CSS Properties
OBSOLETE PREFIXES
-xv-interpret-as // -xv- and -o- are old Opera prefixes for the Presto
-xv-phonemes // engine. Opera switched to the Blink engine with
-xv-voice-balance // version 15. The current version is 34.
-xv-voice-duration
-xv-voice-pitch
-xv-voice-pitch-range
-xv-voice-rate
-xv-voice-stress
-xv-voice-volume
-o-border-image
-o-device-pixel-ratio
-o-focus-opacity
-o-link
-o-link-source
-o-mini-fold
-o-object-fit
-o-object-position
-o-tab-size
-o-table-baseline
-o-transform
-o-transform-origin
-o-transition
-o-transition-delay
-o-transition-duration
-o-transition-property
-o-transition-timing-function
-apple-dashboard-region // use -webkit- instead of -apple-. non-standard anyway.
-wap-accesskey // -wap- was part of the failed Wireless CSS spec. WCSS
-wap-input-format // was a subset of CSS2 with a few extensions.
-wap-input-required // -wap- prefixed properties should not be used.
-wap-marquee-dir
-wap-marquee-loop
-wap-marquee-speed
-wap-marquee-style
OBSOLETE PROPERTIES
-ms-flex-align // IE10 supports the old 2012 syntax. IE11 supports
-ms-flex-item-align // the modern syntax unprefixed.
-ms-flex-line-pack
-ms-flex-negative
-ms-flex-order
-ms-flex-pack
-ms-flex-positive
-ms-flex-preferred-size
clip
-webkit-mask-source-type // i think this was renamed to mask-type
NO NEED FOR PREFIX
-moz-animation // CSS3 animations were unprefixed in Firefox 15. the
-moz-animation-delay // current version is 43
-moz-animation-direction
-moz-animation-duration
-moz-animation-fill-mode
-moz-animation-iteration-count
-moz-animation-name
-moz-animation-play-state
-moz-animation-timing-function
-moz-backface-visibility // unprefixed in Firefox 16
-moz-border-image // unprefixed in Firefox 15
-moz-perspective // unprefixed in Firefox 16
-moz-perspective-origin // unprefixed in Firefox 16
-moz-transform // unprefixed in Firefox 16
-moz-transform-origin // unprefixed in Firefox 16
-moz-transform-style // unprefixed in Firefox 16
-moz-transition // unprefixed in Firefox 16
-moz-transition-delay // unprefixed in Firefox 16
-moz-transition-duration // unprefixed in Firefox 16
-moz-transition-property // unprefixed in Firefox 16
-moz-transition-timing-function // unprefixed in Firefox 16
-ms-animation // unprefixed in IE10. according to caniuse.com,
-ms-animation-delay // animation properties were never prefixed
-ms-animation-direction
-ms-animation-duration
-ms-animation-fill-mode
-ms-animation-iteration-count
-ms-animation-name
-ms-animation-play-state
-ms-animation-timing-function
-ms-font-feature-settings // unprefixed in IE10. according to caniuse.com, this was never prefixed
-ms-transition // unprefixed in IE10. according to caniuse.com, these were never prefixed
-ms-transition-delay
-ms-transition-duration
-ms-transition-property
-ms-transition-timing-function
-webkit-background-clip
-webkit-background-origin
-webkit-background-size
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-radius
-webkit-box-sizing
-webkit-opacity
-webkit-text-decoration
NOT ON STANDARDS TRACK
-epub-text-combine // most of these are listed on MDN as "do not use",
-webkit-text-combine // but MDN has lots of errors.
-webkit-dashboard-region
-moz-background-inline-policy
-moz-binding
-moz-border-end
-moz-border-end-color
-moz-border-end-style
-moz-border-end-width
-moz-border-bottom-colors // border-bottom-color is supported
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-border-start
-moz-border-start-color
-moz-border-start-style
-moz-border-start-width
-moz-box-align
-moz-box-direction
-moz-box-flex
-moz-box-ordinal-group
-moz-box-orient
-moz-box-pack
-moz-control-character-visibility
-moz-float-edge
-moz-force-broken-image-icon
-moz-image-region
-moz-margin-end
-moz-margin-start
-moz-math-display
-moz-math-variant
-moz-orient
-moz-osx-font-smoothing
-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-moz-padding-end
-moz-padding-start
-moz-script-level
-moz-script-min-size
-moz-script-size-multiplier
-moz-stack-sizing
-moz-user-focus
-moz-user-input
-moz-user-modify
-moz-window-shadow
-ms-block-progression
-ms-content-zoom-chaining
-ms-content-zoom-limit
-ms-content-zoom-limit-max
-ms-content-zoom-limit-min
-ms-content-zoom-snap
-ms-content-zoom-snap-points
-ms-content-zoom-snap-type
-ms-content-zooming
-ms-grid-columns
-ms-grid-rows
-ms-high-contrast-adjust
-ms-hyphenate-limit-chars
-ms-hyphenate-limit-lines
-ms-hyphenate-limit-zone
-ms-ime-align
-ms-interpolation-mode
-ms-scroll-chaining
-ms-scroll-limit
-ms-scroll-limit-x-max
-ms-scroll-limit-x-min
-ms-scroll-limit-y-max
-ms-scroll-limit-y-min
-ms-scroll-rails
-ms-scroll-snap-points-x
-ms-scroll-snap-points-y
-ms-scroll-snap-type
-ms-scroll-snap-x
-ms-scroll-snap-y
-ms-scroll-translation
-ms-text-combine-horizontal
-ms-touch-action
-ms-touch-select
-ms-wrap-margin
-webkit-aspect-ratio
-webkit-background-composite
-webkit-border-after
-webkit-border-after-color
-webkit-border-after-style
-webkit-border-after-width
-webkit-border-before
-webkit-border-before-color
-webkit-border-before-style
-webkit-border-before-width
-webkit-border-end
-webkit-border-end-color
-webkit-border-end-style
-webkit-border-end-width
-webkit-border-fit
-webkit-border-horizontal-spacing
-webkit-border-start
-webkit-border-start-color
-webkit-border-start-style
-webkit-border-start-width
-webkit-border-vertical-spacing
-webkit-box-align
-webkit-box-direction
-webkit-box-flex
-webkit-box-flex-group
-webkit-box-lines
-webkit-box-ordinal-group
-webkit-box-orient
-webkit-box-pack
-webkit-box-reflect
-webkit-box-shadow
-webkit-column-axis
-webkit-column-break-after
-webkit-column-break-before
-webkit-column-break-inside
-webkit-alt
-webkit-app-region
-webkit-column-progression
-webkit-font-smoothing
-webkit-highlight
-webkit-hyphenate-character
-webkit-line-box-contain
-webkit-line-break
-webkit-line-clamp
-webkit-locale
-webkit-logical-height
-webkit-logical-width
-webkit-margin-after
-webkit-margin-after-collapse
-webkit-margin-before
-webkit-margin-before-collapse
-webkit-margin-bottom-collapse
-webkit-margin-collapse
-webkit-margin-end
-webkit-margin-start
-webkit-margin-top-collapse
-webkit-marquee
-webkit-marquee-direction
-webkit-marquee-increment
-webkit-marquee-repetition
-webkit-marquee-speed
-webkit-marquee-style
-webkit-mask-box-image // syntax was changed to mask-border-*
-webkit-mask-box-image-outset
-webkit-mask-box-image-repeat
-webkit-mask-box-image-slice
-webkit-mask-box-image-source
-webkit-mask-box-image-width
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-mask-repeat-x
-webkit-mask-repeat-y
-webkit-max-logical-height
-webkit-max-logical-width
-webkit-min-logical-height
-webkit-min-logical-width
-webkit-padding-after
-webkit-padding-before
-webkit-padding-end
-webkit-padding-start
-webkit-perspective-origin-x
-webkit-perspective-origin-y
-webkit-print-color-adjust
-webkit-region-break-after
-webkit-region-break-before
-webkit-region-break-inside
-webkit-rtl-ordering
-webkit-scroll-snap-coordinate
-webkit-scroll-snap-destination
-webkit-scroll-snap-points-x
-webkit-scroll-snap-points-y
-webkit-scroll-snap-type
-webkit-svg-shadow
-webkit-tap-highlight-color
-webkit-text-decorations-in-effect
-webkit-text-fill-color
-webkit-text-security
-webkit-text-stroke
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-touch-callout
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z
-webkit-user-drag
-webkit-user-modify
accelerator
background-blend-mode
background-repeat-x
background-repeat-y
buffered-rendering
color-rendering
enable-background
fill
fill-opacity
fill-rule
glyph-orientation-horizontal
glyph-orientation-vertical
kerning
layout-flow
layout-grid
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
marker
marker-end
marker-mid
marker-offset
marker-start
paint-order
ruby-overhang
scrollbar-arrow-color
scrollbar-base-color
scrollbar-dark-shadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
scrollbar3d-light-color
shape-rendering
stop-color
stop-opacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
style-float
text-anchor
text-autospace
text-decoration-blink
text-decoration-line-through
text-decoration-none
text-decoration-overline
text-decoration-underline
text-justify-trim
text-kashida
text-kashida-space
text-line-through-color
text-line-through-mode
text-line-through-style
text-line-through-width
text-overline-color
text-overline-mode
text-overline-style
text-overline-width
text-rendering
text-underline-color
text-underline-mode
text-underline-style
text-underline-width
touch-action
vector-effect
NOT SURE
-epub-caption-side // discussion here: http://lists.w3.org/Archives/Public/www-style/2013Aug/0430.html
-epub-hyphens // all these properties are available in unprefixed form
-epub-text-orientation // in modern browsers. i have no idea if epub readers
-epub-text-transform // actually implement them. honest question: how many
-epub-word-break // people are writing CSS targeting epub readers?
-epub-writing-mode
-moz-text-size-adjust // text-size-adjust only implemented in mobile safari,
-webkit-text-size-adjust // where it's buggy. property is "at risk" in the spec
// and the entire spec is at risk. still, i'm taking
// it out of illegal and simply not highlighting it
// for now
@unitof

This comment has been minimized.

Show comment
Hide comment
@unitof

unitof Jul 28, 2015

epub question regarding lines 365-370: Shouldn't there be a way to target epub readers through @media queries, then write epub-specific rules using more common css properties? I don't have experience here, just wondering why some of these (especially one like -epub-text-transform) are written as epub-prefixed properties when perfectly normal properties exist (eg. text-transform) that could be nested under some epub @media query.

unitof commented Jul 28, 2015

epub question regarding lines 365-370: Shouldn't there be a way to target epub readers through @media queries, then write epub-specific rules using more common css properties? I don't have experience here, just wondering why some of these (especially one like -epub-text-transform) are written as epub-prefixed properties when perfectly normal properties exist (eg. text-transform) that could be nested under some epub @media query.

@LandisTwo

This comment has been minimized.

Show comment
Hide comment
@LandisTwo

LandisTwo commented Oct 6, 2015

thanks.

@NetOperatorWibby

This comment has been minimized.

Show comment
Hide comment
@NetOperatorWibby

NetOperatorWibby Jan 11, 2016

Thanks a lot for this, I just cleaned up a Sass file of some properties.

NetOperatorWibby commented Jan 11, 2016

Thanks a lot for this, I just cleaned up a Sass file of some properties.

@neilmonroe

This comment has been minimized.

Show comment
Hide comment
@neilmonroe

neilmonroe Mar 8, 2016

Not sure if you want to include another section to this doc with elements that may have been in the HTML5 spec at one time (and possibly partially implemented in some browsers), but no longer are part of the official spec. "hgroup" is one such element. It does still exist in the WHATWG version, however.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

neilmonroe commented Mar 8, 2016

Not sure if you want to include another section to this doc with elements that may have been in the HTML5 spec at one time (and possibly partially implemented in some browsers), but no longer are part of the official spec. "hgroup" is one such element. It does still exist in the WHATWG version, however.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

@uma-mantonio

This comment has been minimized.

Show comment
Hide comment
@uma-mantonio

uma-mantonio Jul 19, 2016

Since Installing CSS3 and disabling CSS I no longer see !important in the hints. Not a big deal unless you're working with a Wordpress theme that requires this declaration. Unfortunately I'm working with a Wordpress theme that requires this declaration in order to override the defaults.

uma-mantonio commented Jul 19, 2016

Since Installing CSS3 and disabling CSS I no longer see !important in the hints. Not a big deal unless you're working with a Wordpress theme that requires this declaration. Unfortunately I'm working with a Wordpress theme that requires this declaration in order to override the defaults.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Dec 25, 2016

Come on people! Delete existing CSS package and tons goes blank, where hints should happen. I am left always using multiple hint titles, last used goes to top of hint list. When is this "CSS3" plugin going to be completed? 2100? Millennium 3000?

ghost commented Dec 25, 2016

Come on people! Delete existing CSS package and tons goes blank, where hints should happen. I am left always using multiple hint titles, last used goes to top of hint list. When is this "CSS3" plugin going to be completed? 2100? Millennium 3000?

@y0ssar1an

This comment has been minimized.

Show comment
Hide comment
@y0ssar1an

y0ssar1an Apr 23, 2017

CSS3 doesn't offer an !important completion by design. !important should be used rarely, and you should have to think about it when you use it. The extra friction of having to type all the characters in !important is intentional. CSS3 also doesn't offer deprecated and non-standard CSS as completions.

I understand there are practical concerns and legacy browsers are still around, but browsers have come a long way in just the last year. Most of the web has moved to evergreen browsers. A lot of the hacks and -vendor- prefixes of the past aren't necessary any more.

Owner

y0ssar1an commented Apr 23, 2017

CSS3 doesn't offer an !important completion by design. !important should be used rarely, and you should have to think about it when you use it. The extra friction of having to type all the characters in !important is intentional. CSS3 also doesn't offer deprecated and non-standard CSS as completions.

I understand there are practical concerns and legacy browsers are still around, but browsers have come a long way in just the last year. Most of the web has moved to evergreen browsers. A lot of the hacks and -vendor- prefixes of the past aren't necessary any more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment