jonathan stegall: creative tension » CSS http://jonathanstegall.com culture, design, spirituality Fri, 04 May 2012 02:34:14 +0000 en hourly 1 http://wordpress.org/?v= ★ CSS Naked Day 2010 http://jonathanstegall.com/2010/04/08/css-naked-day-2010/ http://jonathanstegall.com/2010/04/08/css-naked-day-2010/#comments Thu, 08 Apr 2010 13:48:19 +0000 Jonathan http://jonathanstegall.com/?p=2715 CSS Naked Day, which is a time for designers to remove styles from their websites, showing the underlying semantic HTML in all its glory. The point of this has always been to show the point of and promote such semantic HTML and web standards by showing how they serve to organize a site's content before it is visually organized. This is an important reminder to those of us concerned with accessibility, search engine optimization, and the standards we're promoting.]]> Today marks the second time (because it took me so long to design my website after I turned it into a blog) that I’ve celebrated CSS Naked Day, which is a time for designers to remove styles from their websites, showing the underlying semantic HTML in all its glory.

The point of this has always been to show the point of and promote such semantic HTML and web standards by showing how they serve to organize a site’s content before it is visually organized. This is an important reminder to those of us concerned with accessibility, search engine optimization, and the standards we’re promoting.

Obviously, this isn’t happening on any client sites, but it’s appropriate to put on one’s blog.

]]> http://jonathanstegall.com/2010/04/08/css-naked-day-2010/feed/ 0 ★ CSS Naked Day 2009 http://jonathanstegall.com/2009/04/04/css-naked-day-2009/ http://jonathanstegall.com/2009/04/04/css-naked-day-2009/#comments Sun, 05 Apr 2009 04:40:55 +0000 Jonathan http://jonathanstegall.com/?p=1374 CSS Naked Day. Essentially, it involves a single international day (48 hours, following all the time zones) in which participating sites deactivate their CSS, which removes all styling and leaves only the underlying markup.]]> Each year, there is an event participated in by many standards-aware web designers and developers, called CSS Naked Day. Essentially, it involves a single international day (48 hours, following all the time zones) in which participating sites deactivate their CSS, which removes all styling and leaves only the underlying markup.

It is described in this way:

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.

Enough said. I wanted to let you know that I’ll be participating this year. I care deeply about beautiful, semantic code on the sites, and portions of sites, that I influence. I think this is a vital part of high quality, modern web design.

]]> http://jonathanstegall.com/2009/04/04/css-naked-day-2009/feed/ 1 ★ IE z-index bug with CSS dropdown menu http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/ http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/#comments Fri, 16 Jan 2009 00:12:35 +0000 Jonathan http://jonathanstegall.com/?p=663 Standards-aware web designers generally know of the z-index bug in all versions of Internet Explorer (though, version 8 is rumored to fix it).

In the W3C’s specs, z-index is designed to affect the stacking order of positioned elements on a web page. So, an element with a z-index of 2 should always appear above an element with a z-index of 1.

In Internet Explorer, this doesn’t work like it should. Internet Explorer resets the stack when the positioned elements are separated from each other.

Example

So let’s say we have the following HTML. Fairly standard header, navigation, etc.

  1. <div id="wrapper">
  2. <div id="header">
  3. <ul id="nav">
  4. <li><a href="#">home</a></li>
  5. <li><a href="#">item one</a>
  6. <ul>
  7. <li><a href="#">sub item one</a></li>
  8. <li><a href="#">sub item two</a></li>
  9. </ul>
  10. </li>
  11. <li><a href="#">item two</a>
  12. <ul>
  13. <li><a href="#">sub item one</a></li>
  14. <li><a href="#">sub item two</a></li>
  15. </ul>
  16. </li>
  17. </ul>
  18. </div>
  19. <div id="container">
  20. <h1>Hi. This is a positioned H1</h1>
  21. <p>This page is just some friendly content to show you just how bad IE really is.</p>
  22. </div>
  23. </div>

Then, we have the following CSS.

  1. #wrapper #header {
  2. position: relative;
  3. }
  4. #wrapper #nav {
  5. clear: both;
  6. margin: 0 5px;
  7. padding: 0 5px;
  8. width: 750px;
  9. height: 30px;
  10. list-style: none;
  11. border-top: 1px solid #335a86;
  12. border-bottom: 1px solid #335a86;
  13. text-align: center;
  14. position: relative;
  15. z-index: 2;
  16. }
  17. #wrapper #nav li {
  18. float: left;
  19. margin: 0;
  20. padding: 0 0 5px 0;
  21. border: 0;
  22. position: relative;
  23. }
  24. #wrapper #nav li a {
  25. margin: 0;
  26. padding: 7px 15px;
  27. display: block;
  28. text-decoration: none;
  29. font-size: 1.2em;
  30. }
  31. #wrapper #nav a:link, #wrapper #nav a:visited {
  32. color: #888;
  33. }
  34. #wrapper #nav a:hover, #wrapper #nav a:focus {
  35. color: #335a86;
  36. }
  37. #wrapper #nav li ul {
  38. background-color: #ccc;
  39. width: 150px;
  40. height: auto;
  41. list-style: none;
  42. margin: 0;
  43. padding: 5px 0 10px 0;
  44. border: 0;
  45. text-align: left;
  46. position: absolute;
  47. display: none;
  48. }
  49. #wrapper #nav li ul li {
  50. float: none;
  51. margin: 0;
  52. line-height: 30px;
  53. height: 30px;
  54. }
  55. #wrapper #nav li ul a {
  56. padding: 7px 10px;
  57. white-space: nowrap;
  58. display: block;
  59. }
  60. #wrapper #nav li:hover ul {
  61. display: block;
  62. }
  63. #wrapper #container {
  64. padding: 10px;
  65. position: relative;
  66. }
  67. #wrapper h1 {
  68. position: absolute;
  69. left: 10px;
  70. top: 10px;
  71. height: 60px;
  72. line-height: 60px;
  73. vertical-align: middle;
  74. font-size: 2em;
  75. background: #335a86;
  76. color: #fff;
  77. }
  78. #wrapper #container p {
  79. margin-top: 60px;
  80. }

This is very common code used to trigger a CSS dropdown menu in all modern browsers. Remember that IE6, of course, requires a small JavaScript. A good example is the Sons of Suckerfish. I do not have this JavaScript on my current example, since there are plenty of other great articles about that.

IE Dropdown Bug Example

IE7 Example – click to enlarge

When the code below the navigation, in this case the absolutely positioned h1, is any positioned element (or a select element, Flash movie, etc.), all versions of Internet Explorer prior to version 8 will cause the dropdown menus to fall behind the content.

The Fix

The fix for this is very simple, but there are incredibly large websites that use jumbled masses of iframes, extra divs, and other horrors to get Internet Explorer to display the dropdowns above the offending elements.

For a fix, we use the following CSS for the header div. See the screenshot for an example of this (again, in IE7). Click it to see a larger version.

  1. #wrapper #header {
  2. position: relative;
  3. z-index: 2;
  4. }

Now, you will also need to make sure that your container div, whatever it is called, is styled correctly. In my example:

  1. #wrapper #container {
  2. position: relative;
  3. }

This ensures that the header and the container, whatever you call them, understand their relationship to each other for the z-index fix to work.

IE Dropdown Bug Fix Example

IE7 Example – click to enlarge

This fix causes the dropdowns to appear above everything that is inside the content areas of the page. It works in IE7 and IE6. My example adds some code to show the <select> statement, which is another common offender.

]]> http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/feed/ 131 ★ More CSS for large websites http://jonathanstegall.com/2008/03/29/more-css-for-large-websites/ http://jonathanstegall.com/2008/03/29/more-css-for-large-websites/#comments Sat, 29 Mar 2008 23:37:53 +0000 Jonathan http://jonathanstegall.com/?p=166 I want to continue with my thoughts on creating and maintaining CSS on very large websites. In my last post on the subject, I mentioned that there are at least ten different layout conventions that I deal with on a regular basis.

For what it’s worth, I want to add a little context and say that those layout conventions (and ten is a rough estimate) power somewhere around four hundred pages, give or take a few. Certainly, the website is much larger than that number, but again those are the ones with which I have significant interaction.

Again, none of this is new to someone who works on a very large website, but all of it was new to me. In light of this, I want to shed a little more light on some of the techniques I use or have used.

Structured Sections of Styles

I began to practice this technique when most of my days were spent working with relatively small sites, that typically had a total page number of less than fifty. However, many stylesheets don’t do this, so I think it’s worth mentioning.

Structuring sections of styles allows the designer to keep things in logical places within the stylesheet: such as layout styles, link styles, typography, browser fixes, and so on. An example goes like this:

HTML:

  1. <div id="wrapper" class="layout-a">
  2. <div id="subContent">
  3. <p>content</p>
  4. </div>
  5. <div id="mainContent">
  6. <p>content</p>
  7. </div>
  8. </div>
  1. <div id="wrapper" class="layout-b">
  2. <div id="subContent">
  3. <p>content</p>
  4. </div>
  5. <div id="mainContent">
  6. <p>content</p>
  7. </div>
  8. </div>

CSS:

  1. body {
  2. background: #fff;
  3. font-size: 76%;
  4. text-align: center;
  5. }
  6. /* Layout Styles */
  7. /* constants */
  8. #wrapper {
  9. width: 760px;
  10. margin: 0 auto;
  11. text-align: left;
  12. font: 1em normal Verdana, Arial, Helvetica, sans-serif;
  13. }
  14. /* end constants */
  15. /* layout-a */
  16. .layout-a #subContent {
  17. width: 260px;
  18. float: left;
  19. }
  20. .layout-a #mainContent {
  21. width: 400px;
  22. float: right;
  23. }
  24. /* end layout-a */
  25. /* layout-b */
  26. .layout-b #mainContent {
  27. width: 400px;
  28. float: left;
  29. }
  30. .layout-b #subContent {
  31. width: 260px;
  32. float: right;
  33. }
  34. /* end layout-b */
  35. /* Link Styles */
  36. /* constants */
  37. a:link, a:visited {
  38. color: #f00;
  39. text-decoration: underline;
  40. }
  41. a:hover, a:focus, a:active {
  42. color: f00;
  43. text-decoration: none;
  44. }

Thus, styles become very nicely organized and can easily be found by another designer, or a developer, or someone learning from your source code.

Multiple stylesheets

Most large websites already do this, but it is important to mention that multiple stylesheets are an amazing organizational tool, beyond (but not replacing) the need to structure the stylesheets themselves.

Example:

  1. <link rel="stylesheet" href="reset.css" type="text/css" media="screen, projection" />
  2. <link rel="stylesheet" href="site.css"> type="text/css" media="screen, projection" />
  3. <link rel="stylesheet" href="businessUnit.css" type="text/css" media="screen, projection" />

For myself, I use Eric Meyer‘s great reset stylesheet to remove default browser styles (as well as, in my case, default styles from the CMS that conflict with my needs). There are several others around the internet. Use whatever fits.

In my situation, several different business units have very different styles for their respective sections of the website. So, its beneficial to add these in separately when they do not overlap. Often, each business unit has several different layout conventions, hence the use of layout-a and layout-b, and so on.

Calm down

Unfortunately, most large websites do not validate, neither in their HTML or their CSS. This can be a constant source of frustration for standards-aware designers and developers. Multiple people may maintain the code. Some of them may be serious back-end programmers who don’t care about what the browser actually receives at all. Others may be non-technology people who barely know what a browser is, but have the responsibility of maintaining code for one reason or another.

And that has to become okay, at least to an extent. Otherwise, jobs become depressing. Certainly, work for better support of web standards. Push the fact that even the IE team wants to support standards. Push for accessibility, and the fact that major websites are being sued for accessibility violations. These things are important.

But every once in a while, take a flight for a few hours. Rejoice in the fact that, at least for now, people can’t call your cell phone and tell you that the world is ending, and expect you to do something about it. They’ll have to wait till you land.

]]> http://jonathanstegall.com/2008/03/29/more-css-for-large-websites/feed/ 0 ★ Efficient CSS for large websites http://jonathanstegall.com/2008/03/28/efficient-css-for-large-websites/ http://jonathanstegall.com/2008/03/28/efficient-css-for-large-websites/#comments Fri, 28 Mar 2008 14:00:19 +0000 Jonathan http://jonathanstegall.com/2008/03/28/efficient-css-for-large-websites/ I could see this becoming a series of posts, but for now I’ll start with one. I spend my days, to a large extent, dealing with HTML and CSS on a very large website.

I used to spend the majority of my days dealing with XHTML and CSS in relatively small websites. Rather than having, say, four or five different layout conventions, I now deal with at least ten different layout conventions. There are sections of the site that are of varying ages, and sections that were designed at different times and by different people in the company’s history. Any very large website is likely to have these kind of issues.

One of the results of this shift in my work situation is that I now have very large stylesheets. While there is a large amount of re-used code, re-used styles, and so on, there is so much going on that it is difficult to have efficiency.

There are a number of CSS frameworks that have come out in recent years, from YUI to Blueprint to others. This trend is similar to the trend of JavaScript libraries, of course, and it is seen as both a good thing and a bad thing, depending on how it is used.

One of the things that I have lately begun to make use of, though, is the YUI convention of creating several different layouts based on one selector. Thus, we might have the following:

  1. <div id="wrapper" class="layout-a">
  2. <div id="subContent">
  3. <p>content</p>
  4. </div>
  5. <div id="mainContent">
  6. <p>content</p>
  7. </div>
  8. </div>
  1. <div id="wrapper" class="layout-b">
  2. <div id="subContent">
  3. <p>content</p>
  4. </div>
  5. <div id="mainContent">
  6. <p>content</p>
  7. </div>
  8. </div>

The benefit of this is that layout-a and layout-b can share an identical structure in their HTML, and be styled to match almost any layout convention with less code and more efficiency than, for example, creating different divs for all of the sections.

Any styles that are shared between the layouts are, of course, shared. They don’t have to target layout-a or layout-b. As I begin to implement this, I find code becoming more efficient and I feel that it would be much easier for someone else to come along and have to deal with it.

When I first began working on this type of site, I was very good at HTML and CSS, but apparently I was not very efficient. This degree of efficiency simply wasn’t necessary, although it certainly could have been beneficial. I post all this because I have a feeling that I’m not the only one who could benefit from this kind of thought shift.

]]> http://jonathanstegall.com/2008/03/28/efficient-css-for-large-websites/feed/ 1 ★ Reasons for IE8′s Default Behavior http://jonathanstegall.com/2008/03/04/reasons-for-ie8s-default-behavior/ http://jonathanstegall.com/2008/03/04/reasons-for-ie8s-default-behavior/#comments Wed, 05 Mar 2008 00:57:50 +0000 Jonathan http://jonathanstegall.com/2008/03/04/reasons-for-ie8s-default-behavior/ As I’ve been thinking about the new default behavior that Microsoft announced for IE8, it occurs to me that there are a lot of reasons for Microsoft’s decision. In light of these thoughts, I want to look at the reasons that I think are likely possibilities.

Standards as a whole

Microsoft, especially in the last year or two, has made a lot of moves toward standards, web and otherwise. They announced the Interoperability Principles. They announced the ASP.NET MVC Framework, which finally allows programmers to control the HTML generated by ASP.NET. IE8 will pass Acid2, and any number of other things.

While I’m not optimistic that any of this will cause Microsoft to act in any unexpected ways with respect to its attempts to acquire Yahoo, it is clear that a shift is occurring, to whatever extent.

Noise from the web standards community

Advocates of web standards have made a lot of noise about the original decision, and it is clear that Microsoft listened. Many people made logical arguments for why IE8, especially from a long-term perspective, should not default to IE7 behavior, while understanding that the option for IE7 behavior was a good thing.

Legal issues

It’s entirely possible that this is partly related to Microsoft’s various legal troubles, and that they are trying to appear as a better business citizen to help their case.

Future versions of IE

I think one of the most significant benefits, both from the perspective of future versions of IE, as well as future versions of Firefox, Opera, Safari, etc., is that the need for version targeting will probably become much less because IE8 is the default behavior. People who create sites that break in IE8 will, certainly, have the option of targeting IE7, but in order to do that they’ll have to learn that they can.

Most people who will run into the issue will probably not have the interest (or the time, possibly) to find out this kind of solution. The ones who do find out about the solution will find out that Microsoft doesn’t see it as the ideal solution, and will probably feel at least some pressure to learn proper ways of doing things. Thus, in a few years, it is entirely possible that versions of Internet Explorer that follow version 8 will be met with a majority of sites that do not break.

That’s not to say that the majority of sites will follow web standards. I’ve seen innumerable websites that didn’t break when IE7 came out, because they had such disregard for web standards that none of the changes affected them. I suspect we’ll have to deal with this for a long time. But that’s fine with me, as the future of web browsers can continue to look forward.

]]> http://jonathanstegall.com/2008/03/04/reasons-for-ie8s-default-behavior/feed/ 0 ★ Microsoft Expands Support for Web Standards http://jonathanstegall.com/2008/03/03/microsoft-expands-support-for-web-standards/ http://jonathanstegall.com/2008/03/03/microsoft-expands-support-for-web-standards/#comments Tue, 04 Mar 2008 00:16:48 +0000 Jonathan http://jonathanstegall.com/2008/03/03/microsoft-expands-support-for-web-standards/ this press release:]]> See this press release:

IE8 has been significantly enhanced, and was designed with great support for current Internet standards. This is evidenced by the fact that even in its first beta, IE8 correctly renders the popular test known as 'Acid2,' which was created by the Web community to promote real-world interoperability,” said Ray Ozzie, Microsoft chief software architect. “Our initial plan had been to use IE7-compatible behavior as the default setting for IE8, to minimize potential impact on the world's existing Web sites. We have now decided to make our most current standards-based mode the default in IE8.

The web standards world has been abuzz for the last few weeks, following the announcement that Internet Explorer 8 (and, presumably, any number of future releases) would have the default behavior of rendering websites in the same way that Internet Explorer 7 does. Causing the browser’s behavior to advance would have required that designers and developers direct it to do so with a meta tag.

Many standards-aware designers and developers were very understanding of the decision to allow websites to target IE7, avoiding issues with badly-programmed websites that break when browsers move forward. However, many of these designers and developers made a lot of noise wishing that Microsoft would allow the default behavior of websites to advance as the browser does, and require those who want to target IE7 to read a little bit and find out about the meta tag.

Apparently, Microsoft listened to the noise. I’m amazed and pleased by this change in strategy. I hope they will be able to spread the word enough, so that websites that will break with IE8′s improved standards support will learn about their options (1. learn how to write standards-compliant code, 2. include a one-line meta tag). I feel pretty confident that this is unrealistic, but I hope that it will happen to the extent that Microsoft doesn’t have to go back on this decision.

]]> http://jonathanstegall.com/2008/03/03/microsoft-expands-support-for-web-standards/feed/ 0 ★ CSS and inflexible CMS’s http://jonathanstegall.com/2008/01/21/css-and-inflexible-cmss/ http://jonathanstegall.com/2008/01/21/css-and-inflexible-cmss/#comments Mon, 21 Jan 2008 15:39:17 +0000 Jonathan http://jonathanstegall.com/2008/01/21/css-and-inflexible-cmss/ I don’t write about CSS as much as I’d like to. I spend a lot of time working with them on an advanced level, however, both in my day job and in any side projects.

I spent a few minutes looking around on Google for issues that arise when designers need to work with and use CSS within the confines of a CMS that does not allow access to things inside the head of the document. Apparently, this is not a rare issue, so I’d like to post a few solutions that, while they are not ideal, do work.

Disclaimer: these options do not validate. The only valid way to include a CSS is inside the head of the document

Option One
Use inline styles. This method is, unfortunately, still the most common way of doing this. A designer might have the following code in place: 

<div id="myDiv" class="myClass">
<p>foo. I'm a div with an ID and a class, but my ID
and class don't do what I want them to do.
Bah.</p>
</div>

If the div is, for example, defined with its ID or class as a very small div floated to the right, but it needs to be a very large div floated to the left, a designer might do this:


<div style="float: left; width: 500px; margin: 5px;">
<p>foo. I'm a div without an ID and class, and I have
ugly inline styles.</p>
</div>
Option 2
Option 2 allows the designer to access the head of the document through JavaScript. There are a number of techniques for doing this, but they have significant issues.
Mainly, this breaks the separation between content, style, and behavior that provides much of the underlying theory of why a designer would want to use CSS in the first place. In addition to this, it breaks the accessibility of the page. Anything that doesn’t have to be done with JavaScript, shouldn’t be done with JavaScript.
Option 3
This is the option I spend a lot of time using when working in this situation. A designer might have the following scenario: 

<head>
<link href="a stylesheet I cannot access"
rel="stylesheet" type="text/css"
media="screen" />
</head>
<body>
<div id="myDiv">
<p>foo. I'm a div that needs some styles. I might be on
thousands of pages across this site.</p>
</div>
</body>



<head>
<link href="a stylesheet I cannot access"
rel="stylesheet" type="text/css"
media="screen" />
</head>
<body>
<link href="mycss.css" rel="stylesheet"
type="text/css" media="screen" />
<div id="myDiv">
<p>foo. I'm a div that has styles, even though
they're not where they should be. I might be on
thousands of pages across this site.</p>
</div>
</body>

The benefit of this is that it works in all major browsers and on all major platforms and, at least, mobile devices (this statement counts Linux and the iPhone as major platforms, for what it’s worth). Also, of course, there is the benefit that the given stylesheet can be called throughout the site, which inline styles do not allow.

There are a few downsides to this technique. Browsers, for one, have to work a bit harder to do this kind of thing. When they encounter style information outside the head, whether it’s in an external file or in the page, they have to break their normal flow of rendering content, and thus this causes pages to be slower. This slowdown, however, is not usually noticeable.

Of course, because browsers have to work harder to do this, and because it does not validate, it is possible (though it is highly unlikely) that future versions may not support this kind of functionality.

]]> http://jonathanstegall.com/2008/01/21/css-and-inflexible-cmss/feed/ 0 ★ Internet Explorer 8 is Acid2 Compliant http://jonathanstegall.com/2007/12/20/internet-explorer-8-is-acid2-compliant/ http://jonathanstegall.com/2007/12/20/internet-explorer-8-is-acid2-compliant/#comments Thu, 20 Dec 2007 18:18:08 +0000 Jonathan http://jonathanstegall.com/2007/12/20/internet-explorer-8-is-acid2-compliant/ Internet Explorer team blog:]]> From the Internet Explorer team blog:

…I'm delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode. While supporting the features tested in Acid2 is important for many reasons, it is just one of several milestones for the interoperability, standards compliance, and backwards compatibility that we're committed to for this release. We will blog more on these topics.

Wonderful news. Web designers and developers everywhere agree with me that IE6 is the bane of our existence. There’s no need to discuss this further. IE7 is a massive improvement, and in general I’m pleased with the direction that the team seems to be taking for the future.

Acid2 compliance is, for me, an unexpected leap forward. Currently, Opera and Safari are the most widely used browsers that have achieved this milestone. Firefox 2.x does not reach this level, although Firefox 3 (which is in beta and, I’m sure, will be released well before IE 8 is) does.

]]> http://jonathanstegall.com/2007/12/20/internet-explorer-8-is-acid2-compliant/feed/ 0