Gabriel Weinberg's Blog - Latest Comments in A Harsh CSS Environment for Testing Widgets

Re: A Harsh CSS Environment for Testing Widgets

Gabriel Weinberg — Tue, 09 Jun 2009 07:38:44 -0000

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

Re: A Harsh CSS Environment for Testing Widgets

Peter Goodman — Tue, 09 Jun 2009 02:00:13 -0000

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

Re: A Harsh CSS Environment for Testing Widgets

jackgretz — Mon, 08 Jun 2009 12:59:05 -0000

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.

Re: A Harsh CSS Environment for Testing Widgets

Gabriel Weinberg — Sun, 07 Jun 2009 16:44:52 -0000

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...

Re: A Harsh CSS Environment for Testing Widgets

Gabriel Weinberg — Sun, 07 Jun 2009 16:42:07 -0000

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.or... 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.

Re: A Harsh CSS Environment for Testing Widgets

Paul Stamatiou — Sun, 07 Jun 2009 16:18:43 -0000

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!)

Re: A Harsh CSS Environment for Testing Widgets

Jed Schmidt — Sun, 07 Jun 2009 15:48:37 -0000

I guess the truly paranoid can use iframes, right?

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

Re: A Harsh CSS Environment for Testing Widgets

Gabriel Weinberg — Sun, 07 Jun 2009 15:26:44 -0000

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

Re: A Harsh CSS Environment for Testing Widgets

scribu — Sun, 07 Jun 2009 15:25:11 -0000

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

Re: A Harsh CSS Environment for Testing Widgets

Gabriel Weinberg — Sun, 07 Jun 2009 15:17:47 -0000

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!

Re: A Harsh CSS Environment for Testing Widgets

Gabriel Weinberg — Sun, 07 Jun 2009 15:13:32 -0000

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.

Re: A Harsh CSS Environment for Testing Widgets

Gabriel Weinberg — Sun, 07 Jun 2009 15:11:04 -0000

Here you go: http://www.gabrielweinberg.... & http://www.gabrielweinberg....

Re: A Harsh CSS Environment for Testing Widgets

Jed Schmidt — Sun, 07 Jun 2009 15:09:31 -0000

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.

Re: A Harsh CSS Environment for Testing Widgets

scribu — Sun, 07 Jun 2009 14:53:21 -0000

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