Comments on: Applying Progressive Enhancement to Your CSS http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/ A resource for Web designers and developers to read about and discuss their craft. Wed, 28 Jul 2010 19:29:20 +0000 hourly 1 http://wordpress.org/?v=3.0 By: Revisiting Progressive Enhancement in CSS - Monday By Noon http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1225 Revisiting Progressive Enhancement in CSS - Monday By Noon Mon, 17 Mar 2008 13:28:36 +0000 http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1225 [...] written about applying progressive enhancement to your CSS in the past, but John’s article goes above and beyond my idea. To summarize the idea behind [...] [...] written about applying progressive enhancement to your CSS in the past, but John’s article goes above and beyond my idea. To summarize the idea behind [...]

]]> By: Jon http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1223 Jon Thu, 22 Mar 2007 13:44:59 +0000 http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1223 @David Kees: Personally I have the same as Fredrik in that document.write, to me, isn't very elegant. You're right, it could work. @Fredrik Wärnsberg: That's what I wanted to touch on in the article. I think something like <code>.hasJS</code> is another good way to solve the issue at hand. I'm not a huge fan of separating style sheets to be honest, but I was willing to stretch for this circumstance. @David Kees: Personally I have the same as Fredrik in that document.write, to me, isn’t very elegant. You’re right, it could work.

@Fredrik Wärnsberg: That’s what I wanted to touch on in the article. I think something like .hasJS is another good way to solve the issue at hand. I’m not a huge fan of separating style sheets to be honest, but I was willing to stretch for this circumstance.

]]> By: Fredrik Wärnsberg http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1224 Fredrik Wärnsberg Thu, 22 Mar 2007 00:03:13 +0000 http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1224 The problem with the method which you mention is that you need to keep your javascript css and your regular css separated. jQuery's document.ready() is a nice function, but if you start digging you notice that it relies on browser-sniffing and browser-specific code, which isn't nice at all. The document.write() in your head-tag works, but it's not really that elegant either. One method that I've grown quite fond of is to add the class "hasJS" to the body of the document (not via the document.onLoad-event, but rather in-line javascript just like you suggest in this article). This way you can add js-specific styles to the same css-file using the .hasJS CSS class selector. The problem with the method which you mention is that you need to keep your javascript css and your regular css separated.

jQuery’s document.ready() is a nice function, but if you start digging you notice that it relies on browser-sniffing and browser-specific code, which isn’t nice at all.

The document.write() in your head-tag works, but it’s not really that elegant either.

One method that I’ve grown quite fond of is to add the class “hasJS” to the body of the document (not via the document.onLoad-event, but rather in-line javascript just like you suggest in this article). This way you can add js-specific styles to the same css-file using the .hasJS CSS class selector.

]]> By: David Kees http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1222 David Kees Tue, 20 Mar 2007 15:39:06 +0000 http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1222 I've use this technique as well, but you don't have to use DOM creation/manipulation syntax if you don't want to. You can just use document.write() to explicitly add the link tag within the head tags of the site. Either way works, but just about any level of javascript experience can understand document.write() but not everyone's familiar with the DOM manipulations. I’ve use this technique as well, but you don’t have to use DOM creation/manipulation syntax if you don’t want to. You can just use document.write() to explicitly add the link tag within the head tags of the site. Either way works, but just about any level of javascript experience can understand document.write() but not everyone’s familiar with the DOM manipulations.

]]> By: All in a days work… http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1221 All in a days work… Tue, 20 Mar 2007 02:12:50 +0000 http://mondaybynoon.com/2007/03/19/applying-progressive-enhancement-to-your-css/#comment-1221 [...] Applying Progressive Enhancement to Your CSS (with JavaScript) include the CSS to ‘initialize’ the document in preparation for user interaction via JavaScript. The style will only be applied if your reader has a JavaScript enabled browser (tags: CSS JavaScript) [...] [...] Applying Progressive Enhancement to Your CSS (with JavaScript) include the CSS to ‘initialize’ the document in preparation for user interaction via JavaScript. The style will only be applied if your reader has a JavaScript enabled browser (tags: CSS JavaScript) [...]

]]>