CSS !important Spacing Test
No Inline Style
The following paragraph has no inline style set:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing. Nec feugiat nisl pretium fusce id velit ut. Viverra justo nec ultrices dui sapien eget mi. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Morbi tristique senectus et netus et malesuada fames. Vulputate ut pharetra sit amet aliquam. Nulla aliquet enim tortor at auctor urna nunc id cursus. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Varius morbi enim nunc faucibus a. Malesuada fames ac turpis egestas integer eget aliquet nibh. Sed turpis tincidunt id aliquet risus feugiat in ante. Morbi quis commodo odio aenean sed adipiscing. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. Vitae et leo duis ut. Molestie nunc non blandit massa enim. Semper eget duis at tellus at urna condimentum mattis.
User Stylesheet for Testing
A spacing.css user stylesheet is available. Declarations are courtesy of Wayne Dick.
Author Inline !important;
The following paragraph is marked up with inline style: <p style="line-height: 90% !important; letter-spacing: -3px; !important;
word-spacing: 0em !important;>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing. Nec feugiat nisl pretium fusce id velit ut. Viverra justo nec ultrices dui sapien eget mi. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. Morbi tristique senectus et netus et malesuada fames. Vulputate ut pharetra sit amet aliquam. Nulla aliquet enim tortor at auctor urna nunc id cursus. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Varius morbi enim nunc faucibus a. Malesuada fames ac turpis egestas integer eget aliquet nibh. Sed turpis tincidunt id aliquet risus feugiat in ante. Morbi quis commodo odio aenean sed adipiscing. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. Vitae et leo duis ut. Molestie nunc non blandit massa enim. Semper eget duis at tellus at urna condimentum mattis.
Results: Is Author Inline !important CSS overridden by User CSS?
No
- Stylish addon (Chrome 55) - Author inline
!importantis not overridden by spacing.css. Seems to apply the CSS at document level and not as a true user stylesheet. - Stylish addon (FireFox 50) - Author inline
!importantis not overridden by spacing.css. Seems to apply the CSS at document level and not as a true user stylesheet.
Yes
- Safari (10.0.2) - Author inline
!importantis overridden by spacing.css - Internet Explorer - Author inline
!importantis overridden by spacing.css
Notes
CSS specificity and Cascade
From the CSS Cascading and Inheritance Level 3 specification:
"An important declaration takes precedence over a normal declaration. Author and user style sheets may contain
!importantdeclarations, with user!importantdeclarations overriding author!importantdeclarations. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation...User agent style sheets may also contain!importantdeclarations. These override all author and user declarations. "
If a user stylesheet has definitions at the same level of CSS specificity, user styles (if implemented in the true sense, i.e. natively in browser rather than through a third-party extension that simply inserts them into the document level) trump inline styles, document styles, etc. Conflicting rules are intrinsic to the CSS mechanism. More specific selectors override more general ones.