DISQUS

scribu · 6 months ago

Pretty cool concept. A minified version of #harsh and #armor would be handy.

Gabriel Weinberg · 6 months ago

Here you go: http://www.gabrielweinberg.com/blog/armor-min.css & http://www.gabrielweinberg.com/blog/harsh-min.css

scribu · 6 months ago

Thanks for the quick response, but I'm getting 404s for both URLs.

Gabriel Weinberg · 6 months ago

Refresh your screen--I forgot the /blog/ part at first and then edited the comment :)

Jed Schmidt · 6 months ago

This is a cool idea: a CSS Reset for widgets.

I'd imagine you'll need to protect against many others for more modern CSS (such as-border-radius, -moz-border-radius, and -webkit-border-radius). Also, any inline elements (span, em, strong, etc.) will display as block within the armor. Solving proliferating styles and inline/block elements will probably add more bloat than value, though.

Gabriel Weinberg · 6 months ago

Yeah, in the widget I'm working on, I reset 'display' to inline after #armor for inline elements. You're probably right that it is a bit too paranoid though. However, I suppose the bloat in this case is greatly reduced when people use gzip (increasingly so) since it will be gzipped away.

As for the modern properties, they should probably be added, at least the ones that often get used. I suppose if you added *all* of them you'd get some serious bloat!

Jed Schmidt · 6 months ago

I guess the truly paranoid can use iframes, right?

One question: what is the most reliable way you've found for injecting CSS?

Gabriel Weinberg · 6 months ago

Not if they want a static link that counts for SEO purposes :).

Wrt to injecting CSS, you can do it via JS by creating a link element and appending it to the head tag. It has its issues (http://wiki.fluidproject.org/display/fluid/Meth...) but it is the cleanest in terms of copy and paste for the user, i.e. they can just copy and paste a JS line.

At the moment I'm leaning towards putting it all inline, however. It is the safest way to make sure it renders correctly, and you can avoid JS altogether if you don't need it.

Gabriel Weinberg · 6 months ago

I removed the 'content' property from #harsh and the examples because it was messing up images and I'm not sure how to prevent that within #armor. Any suggestions are appreciated.

Paul Stamatiou · 6 months ago

Thanks for this! I figure I'll need to run Skribit's widgets through this and tweak as necessary. (oh and thanks for using Skribit!)

Gabriel Weinberg · 6 months ago

Np. I love the Skirbit idea as I continually have writer's block. I actually added it to the Duck Duck Go Blog today as well (http://duckduckgo.com/blog/), where I have even more writer's block! I hope people give me some good ideas soon...

jackgretz · 6 months ago

I just used this for the Scribnia (http://scribnia.com) widget. Extremely helpful--I modified the armor a little bit and then stuck it right into our widget's code. Thanks a lot Gabriel.

Peter Goodman · 6 months ago

Does a properly scoped CSS Reset not do the trick in a harsh environment?

Gabriel Weinberg · 6 months ago

What do you mean by CSS Reset? Something like http://developer.yahoo.com/yui/reset/ ?. That is effectively what #armor is. The YUI reset does not reset enough things. Try it!