A Harsh CSS Environment for Testing Widgets

Embedded widgets can face harsh CSS environments, but usually not this harsh:

#harsh * {
border: thin dotted #00FF00 !important;
display: block !important;
margin: 20 !important;
outline: 1px dotted red !important;
padding: 20 !important;

background: #00ff00 !important;
cursor: move !important;

clear: both !important;
float: left !important;
height: 0 !important;
max-height: 0 !important;
max-width: 0 !important;
min-height: 100px !important;
min-width: 100px !important;
visibility: hidden !important;
width: 0 !important;

bottom: 100px !important;
clip: rect(100px, 50px, 100px, 50px) !important;
left: 100px !important;
overflow: visible !important;
position: absolute !important;
right: 100px !important;
top: 100px !important;
vertical-align: sub !important;
z-index: 100 !important;

color: red !important;
direction: rtl !important;
font: oblique small-caps 900 20px/50px arial !important;
font-size-adjust: .01 !important;
font-stretch: ultra-expanded !important;
letter-spacing: 20px !important;
list-style: decimal inside !important;
text-align: right !important;
text-decoration: blink !important;
text-indent: 100px !important;
text-shadow: #000 30px !important;
text-transform: uppercase !important;
unicode-bidi: embed;
white-space: pre !important;
word-spacing: 20px !important;

border-collapse: separate !important;
border-spacing: 30px !important;
caption-side: bottom !important;
empty-cells: show !important;
table-layout: fixed !important;

If your widget looks OK inside <div id="harsh"></div>, then it will probably look OK anywhere.  I made this HTML example (view source) for easy testing.

Why does this matter? Suppose a site has a black background and white text, but your widget has a white background but no text color set--none of your text would show.

To deal with a harsh environment, you need some armor:

<style type="text/css">
#armor, #armor * {
border: none !important;
display: block !important;
margin: 0 !important;
outline: none !important;
padding: 0 !important;

background: #fff !important;
cursor: auto !important;

clear: none !important;
float: none !important;
height: auto !important;
max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;
visibility: visible !important;
width: auto !important;

bottom: auto !important;
clip: auto !important;
left: auto !important;
overflow: auto !important;
position: relative !important;
right: auto !important;
top: auto !important;
vertical-align: top !important;
z-index: 1 !important;

color: #000 !important;
direction: ltr !important;
font: normal normal normal 11px/14px tahoma,sans-serif !important;
font-size-adjust: none !important;
font-stretch: normal !important;
letter-spacing: normal !important;
list-style: none !important;
text-align: left !important;
text-decoration: none !important;
text-indent: 0 !important;
text-shadow: none !important;
text-transform: none !important;
unicode-bidi: normal;
white-space: normal !important;
word-spacing: normal !important;

border-collapse: collapse !important;
border-spacing: 0 !important;
caption-side: left !important;
empty-cells: hide !important;
table-layout: auto !important;

If you wrap your widget in <div id="armor"></div>, it should work OK. I made another HTML example (view source) for testing this armor.

I tested #armor cross browser using my test systems and browsershots.org. Of course, there are most likely still bugs, so please tell me about them!

To develop #harsh, I used the w3schools CSS Reference, which you can also use to figure out if you want to change the properties in #armor, or apply more thereafter. 

To apply additional styling after #armor, use ids instead of classes, e.g. id=""/# and not class=""/. because a particularly harsh use of #id * will override your classes. Of course, if you aren't that paranoid, you could back off the * in #armor and use classes instead.

You could also just use inline styling, i.e. style="". There may also be a better way to do it that I just haven't thought of yet. If you know of one, do tell...


If you have comments, hit me up on Twitter.
I'm the Founder & CEO of DuckDuckGo, the search engine that doesn't track you. I'm also the co-author of Traction, the book that helps you get customer growth. More about me.