Snook.ca

Html And Css

This morning, I read Heydon Pickering’s post on switching from a multiple column flexbox layout to a single column layout without an intermediate step. I spent a bunch of time figuring out why it works.
Go ahead and read it first, if you haven’t already. Everything I’m going to talk about builds on what he has.
You’re back? You haven’t left? You grabbed coffee because why not? Wh...

I’ve got text. I’ve got an icon at the end of the text. When the container shrinks, the icon wraps to the next line. That orphaned icon is kind of lonely. What if we could get the icon to bring a friend with it?
(This felt like something that should be really easy and has been solved a million times before. And yet, I couldn’t find anything written up on this and, well, I needed it. So h...

Working on a client project, we needed a font stack that would work for Chinese, Japanese, and Korean, (aka CJK) along with all the usual Latin locales.
The client’s previous approach was to simply strip the entire font stack for CJK locales, letting the browser handle it. This meant a serif style. Times New Roman, you had your time to shine.
In researching how others handle it, I notic...

“How hard can it be?” (Famous last words.)
The <progress> element has been in browsers for years. (Lea Verou worked on a polyfill back in 2011!) One might expect that after all these years, things are rock solid. Turns out, not much has changed over the years. It’s still a mess and the process of animating the <progress> element is… not at all smooth.
Which browsers
Th...

I just came across an interesting bug. In Safari 11.0.2 on desktop and on the phone, display:contents falls back to display:inline instead of being ignored.
I created a Pen to demonstrate:
See the Pen display contents by Jonathan Snook (@snookca) on CodePen.
I also was able to test on iOS 10.3.3 and it also seemed to exhibit this behaviour. iOS 9 didn't....

Awhile back, I decided I wanted to have those fancy cards show up when I or anyone else posted a link to my blog.
Twitter card with small image on the left
To do this, you need to add a few meta tags to your pages.
<meta property="og:url" content="https://snook.ca/archives/html_and_css/css-concerns">
<meta property="og:title" content=&qu...

Laying out events on a calendar can be somewhat tricky. Many years ago, I had a client project where I needed to do a calendar similar to Google Calendar. I ended up using bitwise operators to figure out if there was room to put an event on a particular line. If there’s no room, it placed the event on the next available line.
There’s a lot of looping involved just to place an event on th...

There’s been a rumbling of people that want Container Queries—myself included. (Come see my talk this year... it’s all about container queries!)
The idea behind container (née element) queries is that you specify that under certain conditions—most commonly, the width of a particular container—apply different CSS.
The problem with container queries is that it opens up the window ...

Brad Frost recently wrote about managing technology-agnostic design systems. In his post, he recommends using a technology that doesn’t tie itself to any specific framework.
When I was at Yahoo!, we took a very similar approach. We knew we wanted to build out these components and be able to use them across multiple projects. And due to product acquisitions or teams deciding different stacks, ...

These days, I often find myself hearing people say “we use BEM” or “we use SMACSS” and the question that often comes to mind is “how exactly do you use them?”
Coming up with a catchy name for a development approach is a double-edged sword. On one hand, they are a convenient way to convey a lot of information really quickly. If someone says that they use BEM, I can make some quick as...

Dave Rupert recently tweeted asking a question that I see quite often:
.some-context .thing { /* special rules and overrides */ }
Does that go in thing.css or some-context.css?
Then, Harry Roberts discussed this concept further in his article of CSS Code Smells Revisited.
Harry uses a practical example of .thing being a .button. (Well, actually, a .btn but whatever. And yes, I jus...

I ran into a weird issue. Images weren’t loading for some reason on this project I was working on. And yet, on the old site, they loaded just fine. What was different?
After some digging, I noticed that the images that weren’t loading were those defined using the <picture> element. Surely that’s not expected behaviour, is it? Turns out, it is.
There’s a Mixed Content spec....

With the slow rise of Web Components—the breakdown of interfaces into self-contained chunks of HTML, JavaScript, and CSS—will we see an evolution (or revolution) in how we manage the way we write, build, and bundle the CSS for our web sites?
Currently there are two main approaches to writing CSS: component-based and utility-based. (I’ve also seen this referred to object and functional...

In SMACSS, I talk about the different categories of CSS that we write. The very foundation are base styles—plain element selectors. No classes, no IDs. The purpose of these selectors is to style those elements on every page across the site in a consistent way.
Many people I know like to use a CSS reset—like Eric Meyer’s or Normalize—on their project. These resets are base styles.
S...

Subtitle: Why everybody who talks about the importance of semantics is both right and wrong at the same time.
I’ve often heard people talk about semantic CSS. That is, the names we come up for IDs and class names should be meaningful.
When people say “semantic”, I think they do so in a way that assumes that we all know what it means. Yet, the way it’s normally applied is never qui...

In developing a component-based interface, how we decide to construct our components can sometimes make a considerable difference.
Consider this carousel design.
Carousel with multiple cards and pagination controls
The carousel contains a number of items and includes pagination controls.
Let’s start with a very clean HTML structure with a single class to mark the container of...

One of the things that I enjoy covering in my workshops is how to deal with managing the CSS cascade. We all have different techniques that we use and each come with their pros and cons.
The cascade is the rule-based system that rendering engines use to decide what properties should apply to an element when multiple rules are declared for the same element.
For example, let’s say you have...

There’s a recent CSS property that I had originally been quite excited about: all.
The all property is a shortcut for resetting all of the properties on a given element. Like a big ol’ CSS reset in one line. Reset them to what? Either a complete blank slate using the initial value or by having everything inherit from the parent using the inherit value.
When would you want to use the all...

Tim Baxter wrote an article for A List Apart discussing the possibly dogmatic, and maybe unnecessary, use of classes for styling HTML elements.
Why do ‘.button’ when you can do ‘button’? Why do ‘.form’ when you can do ‘form’?
I think it’s important to understand the context of which class-based systems like OOCSS, SMACSS, and BEM have made their way into being.
With ...

I read this post on the dangers of using ARIA roles with a common markup format for tabs.
From the outset, it looked like they were doing everything correctly. Semantic HTML. Added ARIA roles. And yet…
Even though they could see that the tabs existed, some people weren’t able to figure out they needed to use the arrow keys to toggle the inactive tabs, so they couldn’t access that con...

I find it interesting when two (or more) people can say something but the way that something is interpreted can be quite different.
Nearly four years ago, Harry Roberts wrote about applying the single responsibility principle to CSS.
Within the article, Harry explains how defining too many properties on a class selector may make it difficult to re-use that class in other contexts, thereby r...

Dealing with CSS performance can be quite interesting. Various factors, like what properties we use, can have detrimental effects on the usability of a page.
I noticed that my site, as simple as it is, was having a bit of an issue with the fixed background that I’ve had. The scroll performance just wasn’t as smooth as I wanted it to be. I don’t remember this ever being an issue when I fi...

Chris Coyier recently wrote of his issues with using classes in content and I agree with his main point entirely:
Content, like this very article you’re reading, might sit in a database and thus be spat out into a template. The content is unlikely to change but the template can go through many revisions. Knowing how many classes you have and where they are used throughout your content ...

In continuing my exercise of tackling a simple slideshow in different ways, this challenge attempts to make a slideshow without using any JavaScript.
Thankfully, I didn’t research this first and just went with it. Yes, this has been done before by other people. Whatevs. Enjoy…
To do so, I’ll attempt to do this with CSS animations. This was trickier than expected because, well, math is...

As of late, I’ve been thinking about icons and type.
Here’s the example HTML I’m working with here:
<div><i class="icon"></i>cases</div>
Now, that div could be a button, it could be anything. That i could be an image, it could be an svg. Essentially, it’s something that is icon-like, set to display: inline-block. My goal is to center it next to the text bes...

I just ran into this issue today and honestly a little surprised I haven’t run into it before.
The problem was with a font stack that I wanted to try out:
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
If a user has Helvetica Neue or Helvetica, that’s fantastic! This is likely to be the case if they’re on a Mac.
On Windows 7 and 8, Segoe UI is install...

Harry Roberts recently wrote about creating a Specificity Graph to get a better picture of your CSS.
Harry’s conclusion is that a spiky graph is a bad graph. Spikes that occur mid-graph could lead to maintainability issues since CSS that occurs afterwards needs to meet or exceed that level of specificity to override earlier CSS.
In a SMACSS world, however, that’s not likely what your spe...

At Shopify, as our team scales, we’ve been trying to figure out how to manage the influx of new design and new components into the codebase. On one hand, we want all code to meet our coding standards, use the existing system where it can, and expand it when necessary.
As new functionality and new experiments get introduced, we are finding ourselves unsure how best to manage this.
Quick a...

At Shopify, we’re rebuilding much of our front-end code for Shopify Admin. This is giving us the opportunity to re-evaluate why and how we build things.
One of the first components that we decided to work on was the grid.
24 Column GridShopify has, for at least the last two and a half years that I’ve worked there, a 24 column, percentage-based grid. This type of grid is quite common in the i...

I came across Brad Frost's post about the Floated Label Pattern and instantly thought, "I think you can do this in CSS" and set out to prove it.
It turned out to be a little trickier than expected but I created a quick proof of concept:
The Example
First Name
Last Name
How it works
I use the :valid pseudo class along with the pattern attribute on the input to ...

Plenty of people in the CSS world want a parent selector. It’s complicated and I understand it if browsers didn’t implement it.
However, something that could work and could be useful is what I call the Previous Parent selector.
Since CSS is essentially read from right-to-left, and from current element to top element, it should be possible to find a child element of a parent e...

An interesting question was asked of me in regards to the SMACSS methodology:
Karl Tynan asked, “What do you do if you want to use the CSS from one module in another module?”
Not being able to see the design Karl was referring to, it’s hard to say exactly what I would do. However, I’m guessing one of two possible scenarios.
Two modules—like a menu an...

In checking out Google Flights, a design element caught my attention.
I was intrigued that they decided to have the text fade out instead of using ellipses. Inspecting the code, I expected to find an element in each cell with an image background to create the overlay. This would certainly be the most browser-compatible approach to handling text overflow, which is why I thought they took ...

Zielun asks of managing projects:
It often happens in projects that based on one, large system with tons of modules that can be enabled or disabled, and documentation is often not up-to-date or doesn`t exist at all. At least I have such experience. I know that real problem lies elsewhere like in project management but such things often plays main role when you or team decides which coding stan...

I remember a couple years ago speaking at An Event Apart and mentioning how I don't use the definition list. I may have said it a few times, to the annoyance of the audience. When pushed on why I don't use definition lists, I mentioned that screenreaders read out that a term is equal to a definition. Somebody tested and confirmed with me afterwards that his particular screenreader did in fact read...

Mark Otto talks briefly about their decision to use prefixed classes with Bootstrap.
"Prefixed classes guide developers towards a simpler and more maintainable direction for building an extensive CSS design system."
He goes on to say...
"There’s no bleeding of styles or behavior from one component to another here because we treat components in a “successfu...

My mind is on CSS quite a bit these days. At Shopify, I'm jumping into projects that already well under way. As a result, it's been a great way to look at what I wrote in SMACSS and see how applicable it is to yet another project. (As if Yahoo! wasn't already enough of a testing ground.)
With Yahoo!, I (and a team of people) were writing the CSS from scratch and creating our mental map of the p...

With all my work at Yahoo!, I'd been thinking more and more about CSS architecture. I really sat down and took the time to analyze my process. What's the most flexible but straightforward way to do it? How does this fit in with the team process and how does this work in comparison to how other people are doing it?
I started making notes and eventually started writing up my thoughts. Was this go...

I don't think I'm the first person to come up with this idea but figured I'd document it.
If you're unfamiliar with the Yellow Fade Technique, make your way over to the 37signals article that ushered in the design effect that was all the rage for awhile.
This is the same thing but using CSS animations.
/**
* Quick fade on target to attract user attention
*/
:target {
-webkit-a...

CSS3 introduces a few new units. (Oh wait, I've said that before.) So, you've heard about px, pt, em, and the fancy new rem. Let's look at a couple more: vw and vh.
Often times, there are certain elements within our design that we'd like to ensure can fit into the viewport in their entirety. Normally, we'd have to use JavaScript to do this. Check the size of the viewport and then resize any ele...

Just a quick documentation of this interesting bug. This only happens in Internet Explorer 8 (but not 7 or 9), which was interesting. If you have an element with long text but it has white-space:nowrap to prevent text wrapping with a max-width and overflow:hidden to clip the overflowed text, then a floated container (which should collapse to the width of the content) will collapse to the wid...

I've been thinking quite a bit about CSS architecture these days.
One thing in particular that has crossed my mind is how to handle certain situations. For example, we want to hide content on the page and then reveal it (or vice versa). In JavaScript, this is relatively straightforward: get an element, and apply a class or remove a class to change the state of the element. The CSS for that mig...

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable.
There are two main techniques that are extolled:
Size with px
Size with em
Let's review these two approaches be...

One method that I've been using quite a bit for positioning elements is setting them absolute and using left, right, top and bottom values to lock inner elements relative to an outer container. I like using this technique because padding will not cause any positioning issues like using width can—especially when widths need to be percentage-based.
textarea {
position: absolute;
left:...

For years now, we've used a number of techniques for hiding content offscreen for accessibility purposes. We do this because the content is still accessible to screenreaders while being removed from the interface for sighted users.
An article over at Adaptive Themes reviews a number of techniques for hiding content that were considered for inclusion on a Drupal 7 project (but certainly applic...

I ran into this rather odd rendering in Firefox 3.6. I had a fieldset with content following it that was nested inside a list item.
<ul>
<li><fieldset> ... </fieldset>
<p>Additional information.</p>
<li>
</ul>
The odd behaviour became quickly evident when my list bullet would not line up next to the fieldset, as expected. Instead, it...

On a seemingly regular basis, I see this discussion come up as to whether CSS should have a particular feature like the parent selector and while I haven't worked on a browser engine, I have my theories.
In short: performance.
How CSS gets evaluated
With work, I've had to do quite a bit of examination of performance. We run a number of tools over an application to determine where the bottlene...

In Chrome 5, Safari 4, Opera 10.53 and sometimes Firefox (although I was unable to reproduce it in this test case), changing the visibility of the
element by toggling display:none will cause the scroll offset to reset to zero. Toggling visibility:hidden does
not seem to trigger the same problem.
Scroll the container and then toggle the classes applied.
#a { position:relative; ...

IE Mobile for Windows Phone 7 has decided to implement support for -webkit-text-size-adjust. They'll also be adding their own duplicate vendor-specific prefix, -ms-text-size-adjust. That's right, Microsoft will be adding support for another vendor's non-standard implementation.
Is this good or bad? The general consensus on Twitter would indicate that this is a bad thing but while there is a scena...

Some days you can tell that @font-face embedding is still trying to find its feet in becoming a stable and viable solution. Chrome 4 and 5 beta currently have a bug that creates some weird behaviour.
In the following screenshot, you'll notice that everything looks a little off. Okay, that's an understatement.
Image courtesy of Pete Lambert
Every character is replaced by an A in a box. The pro...

HTML forms have been, to date, quite simplistic. We've had limited options: the text field, the checkbox, the radio button, the textarea and finally the select drop down. Any complex data like phone numbers, email addresses or dates had to be checked by JavaScript. (And you should always and I mean always do server-side validation of the data.)
The input element works overtime by being rendered c...

Leave it to PPK to come out with a bold statement like, "CSS vendor prefixes considered harmful". Moreso,
It’s time to abolish all vendor prefixes. They’ve become solutions for which there is no problem, and they are actively harming web standards.
The problem is that they are necessary. Look at Safari's implementation of border-radius compared to the rest. I still ca...

Every now and then I look at using background-position-x and background-position-y but can never seem to find a definitive and up-to-date resource. To save myself the trouble in the future, I'm documenting it here.
Positioning via separate X and Y values is a feature that Internet Explorer introduced but never made it into a W3C specification. Any recommendations to add it to the spec have been d...

CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms.
Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I'm covering both features because mult...

I had noticed this little bug on my own site. In the footer, there's a 5px border with the colour set using rgba. In Safari, it's as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares.
Not quite what you'd expect. Firefox and Opera (10.5; I didn't test in 10.10) render this as you'd expect, wit...

I've spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process.
Font Formats
Generally speaking, these days, a font on our system is going to be one of two formats: TrueType (with a .ttf file extension) or OpenType (with a .otf file extension...

In case you hadn't noticed the lovely titles on this page, they're League Gothic. Well, they should be if you happen to be using the latest version of Firefox, Safari, or Internet Explorer. However, it took much trial and error to figure out exactly how to get there. There are a number of pieces to the puzzle but in the end, I got something to work. The assumption here is that you are on a Mac (as...

Once again, after reading somebody else's article, I felt inspired to put together an alternative example. In this case: Text Rotation.
Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It's like the top fell off the pepper shaker and you've suddenly got a large pile of pepper on your food. It...

I think I have a knack for discovering weird edge cases but here was a wacky one that had me scratching my head for awhile. In working on some interface development, I wanted to have an element with fixed positioning, locking it to the viewport. In this particular case, it quickly animates in by adjusting the opacity of the element from 0 to 100. Straightforward enough, right?
But in Internet E...

When CSS animations were first introduced in Webkit back in 2007, I expressed my concerns that CSS may not be the best place for it.
Sound cool? I don't think so. Not only does it make CSS more complicated, it makes JavaScript more complicated, too.
Having actually taken some time to implement CSS animations in an example, a light bulb clicked. The way I looked at how animations were ...

After my adventures in developing with Adobe AIR, I've been keeping an eye on the state of cross-platform desktop application frameworks. In the past year or so, I know of JavaFX and Titanium that have also hit the market. Not being a fan of Java, I stayed clear of JavaFX. Titanium, on the other hand, with its similarities to Adobe AIR, has been a more compelling option.
Titanium is an open sourc...

This post isn't about what you think. This isn't about some handy little CSS technique you can implement right now. Not yet, anyway. This is about an idea that I've been working on. An idea that — I hope — will one day help you and me build better web sites.
I've come up with my own layout specification.
Um, why?
Who in their right mind would ever want to do something like that? ...

That elephant in the room is losing some weight. The forever scorned IE6 has always had issues with alpha PNGs, those semi-transparent images of goodness. The market share of IE6 is surprisingly big, especially for more mainstream sites and web developers such as you and me are still left holding the bag to support them.
Stoyan Stefanov, one of the people behind Smush.it, has posted the fifth ins...

You may remember my recent expirement with getting rounded corners in Internet Explorer to work with VML. I tried to come up with a way to mimic border-radius and to be able to implement simple rounded corners into a design.
The first implementation I saw that tried to do this in a seamless way was Remiz of HTML Remix. The implementation uses an HTML control (ie: an htc file) that can be easily bo...

With tables becoming less popular, this particular problem doesn't crop up nearly as often anymore but for when those data tables could use a little spice, it'd be nice sometimes to be able to set an image on the table row. The problem is that Internet Explorer 6 and 7 have this little problem: the background image specified in the TR gets displayed as if set for each TD. In other words, a backgro...

An idea had struck me this afternoon that there might be some technology deep in the depths of Internet Explorer that might unlock the secret to easy rounded corners. Unfortunately, my initial idea fell flat and I was left in the same place I was before. However, bouncing from idea to idea, I thought to try VML. VML is an XML-based approach that Microsoft came up with and proposed it to the W3C. A...

When asked recently about using a CSS reset stylesheet, I readily admitted that I don't use them. I don't use them for my blog or for any project that I work on. Admitting such can raise an eyebrow or two. Reset stylesheets are definitely becoming commonplace — as you'd expect with companies like Yahoo and industry leaders like Eric Meyer actively using them.
So, why haven't I jumped on b...

Here's the problem: you have a container with some content in it like an image along with some initial descriptive text. Then, when users hover their mouse over the container, a hidden container is revealed to present additional information over top of the current information but in a way that retains content from the original container.
This was essentially the problem presented to me by Anton P...

Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There's font styles, margin, padding, color and what not. But there's a wall that people will run into... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.
These are the six things that will help people get over the hump.
...

The folks over at 37signals have a blog post today about print style sheets. Basically, just add everything you don't want to print into one statement and set it to display:none. I do the same thing here on Snook.ca.
I have an extra little tip that's also very applicable to those who run blogs: force a page break before the comments.
#comments {page-break-before:always;}
I do this so that...

In CSS, there are certain selectors you can use that act like you've injected new HTML into the page and have the flexibility to style those new imaginary elements. These are known as pseudo-elements.
CSS 2.1 has four of them:
:first-line allows you to style the first line of a block element
:first-letter allows you to style the first letter of a block element
:before allows you ...

In doing some research, I discovered that you could use Unicode for CSS class names. Okay, nothing earth shattering by any means. But think of the ideograms that exist within and how applicable they might actually be.
Take for example a common rounded corner HTML setup:
<div class="container"> <div class="left-top"> <div class="right-top"> ...

I've been working on this layout that had a relatively positioned element inside a container with overflow. Everything looked good until I switched to IE7 and noticed that my positioned element remained fixed.
Here's some code to demonstrate the problem:
<div id="container">
<div id="a"></div>
<div id="b"></div>
</div>
...

After seeing it mentioned in Transcending CSS and then again in Pro CSS Techniques, I think there may be a general misconception as to how the ADDRESS element should be used.
In neither case did the authors explain how or why the element should be used. In fact, it seemed implied that it should be used to mark up any postal address that might find its way onto a web page. In the argument of sema...

Nate Koechley writes eloquently on the appropriate use of DIVs. While he doesn't come out and say it, I feel like he’s speaking about those who quickly wish to label something with a heavy use of DIVs as divitis.
“According to the authoritative W3C spec, DIVs are specifically designed “for adding structure to documents.” Reasonable examples include encapsulating dist...

Awhile back I had a project where I needed to get a design converted over to an HTML template. Knowing how much flexibility I had with scheduling, I decided to try out XHTMLGenius.
XHTMLGenius promises a 3 day turnaround for delivery for $250. The template was pretty straightforward so I didn't expect too many surprises. Luckily, Shaun (the man behind the scenes) delivered. Ahead of schedule, in...

This is somewhat of a follow-up to my previous post, Commoditization of HTML. This is a collection (directory?) of services that will provide HTML and CSS development for you (and me). I will continue to update this page as I hear about other services.
Service
Days
Price per Page
Incl. Opera/Safari
PSD2HTML
1
$117
No
1
$153
...

I've been noticing these services cropping up all over the place these days. You send them a PSD or PNG and they build out the HTML and CSS for you.
This type of thing existed before and I've certainly received emails from offshore companies willing to do my production work for me. However, they were behind the times and produced inadequate code; at least, inadequate for the 'standardistas' amon...

I thought I'd share some of my habits when it comes to doing
CSS work and let me warn you, some of what I have to say is probably a little
controversial. But what's life without living it on the edge. (Yeah, I live an
exciting life when CSS is considered 'the edge'.)
px for font sizes
Sacrilege, I know. There are perfectly good ways to get
consistent font sizing and I really should use t...

Source order is fairly important for me. I like to make sure the the order makes sense and is practical. For a recent project, I ended up using something quite handy. Something I like to call Stackable Columns.
The basic layout had a left column with the logo and some sidebar information and then a right column with some main navigation, content, and a footer. A two column layout is standard fare...

Specificity can be tricky. Well, tricky to say the word, anyways. There's a quick approach that I use that can hopefully help you out.
Types of selectors
There's a whole bunch of selectors but for our purposes, we can break it down into three types, of increasing importance:
Element selectors (and pseudo-element selectors) Eg. p {color:red;}
Class selectors (and attribute selectors) Eg. .myclass...

David Stone over at Bare Naked App talks of using a background image to display percentages in a progress bar. The technique could also be used for bar charts or poll results.
What I've traditionally done for these kinds of things, since the image can stretch left to right with no degradation (in other words, there's no horizontal pattern, just a vertical one), I usually just use an image that is...

I've been having more and more fun with CSS these days and the Reboot gave me an opportunity to really have fun with things.
Source Order
One of the ways I've tried to "optimize" my site is to be fairly strict in source order. Article first, comments second, and then navigation and the rest of it comes last. (It's debatable whether navigation should be so far down as some research has shown th...

Nathan Smith had a post awhile back about those stray outlines in Firefox 1.5 due to using a negative value for text-indent used in image replacement. I initially passed on the article as I like users to still receive the default feedback.
Then, in trying to resolve the problem on my own site, I tried using overflow:hidden on the replaced link and suddenly the outline fit into place. In referring...

IE7 is still in beta but with things apparently being layout complete, this hack may stick around until final launch. It's a variation on the underscore hack.
Here's a quick example:
p
{
border:1px solid green; /* works in all */
*border:1px solid red; /* targets IE6 and 7 */
_border:1px solid blue; /* targets IE6 */
}
Yes, this is invalid CSS and it might get fixed by the time IE7 hits the...

Ever do something so glaringly obvious you wondered why you've never done it before? I feel like this is one of things that everybody does because it is so obvious. Here is the scenario: you want your link colour to match the content around it but you have different colours for things like body, navigation and footer. Traditionally, I've set up styles for each area independantly like so:
#nav { c...

As people expand on their HTML and CSS knowledge, there is a progression. At least for me, there was. It starts off with applying a quick style to an HTML element. "Hey, that was cool." It quickly goes from there to putting declarations in the header or in a stylesheet. Classes litter the page. How many times have you seen this on a project?
<p class="paragraphtext">Lorem Ipsum...</p>...

This is almost an eternal debate but I've rarely seen a solid argument for or against either. So, if a client asked you today, what would you say? To make things a little easier, which is better: HTML 4.01 Strict or XHTML 1.0 Strict?
...

Simon Collison (who's name I find way too close to Simon Willison), had come up with a challenge: create scalable underlines that go from edge to edge of the box without using justified text. Using some inspiration, I put together a solution which Colly has so generously named after me. Somehow, I don't think it'll have the same household ring as Fahrner (of FIR) or Inman (of IFR and subsequently ...

Having the footer stick to the bottom of the viewport is a common client request. Cameron, of The Man in Blue fame, has what should be a useful and flexible CSS solution: footerStickAlt. It's a variation on footerStick by solarDreamStudio. Just one more nail in the coffin of table-based layouts.
...

The company I work for, Fuel Industries, just launched a new site: Fuel Games. It is a subdivision focused specifically on gaming as a brand-building experience, also known as advergaming.
One of the main goals of the site was to jam-pack it full of content; to make it interesting to read and to draw in repeat visitors. An extension of that was to improve search engine results. I did a couple key...

Wow. My comments system has been extremely well received. As a result, a few people have asked how I did it.
Position fixed
The system was originally intended to be CSS only using position:fixed on the div that contains Post a Comment. This is great for browsers that support it and pretty much useless for any browser that doesn't. There's one caveat on using fixed positioning that I'll get to la...

A redesign addict, that is. What else would explain me being up at two in the morning hacking away at yet another redesign of snook.ca?
Once again, I was able to pull off the redesign without having to touch the original files[1]. Ala the CSS Zen Garden, I just dropped in the new stylesheet and I was off to the races.
[1] Okay, that's a small lie. I took out a hyphen and added a line break in th...

In what, lately, is almost becoming a regular series, I've put together an experiment. This time in presenting INS and DEL.
If you've taken a look at the example, you'll notice that there are two shiny buttons that allow you to show and hide the insert and delete information embedded in the page. For those who aren't aware of the INS and DEL tags, they are used to indicate that changes have been ...

Applying CSS to a table can certainly be one of the more frustrating exercises out there. Applying a background image to a table row is one of those. Consider this an addendum to my previous post Designing Data.
In reviewing the CSS spec for tables, it seems to indicate that one should be able to apply a background image to a table row much like applying a background to any specific cell or to th...

UPDATE: I've added some javascript to adjust the position onscroll.
Note: This article was originally posted under the Long Way Down theme.
I've had this idea in my head for awhile and haven't had the time to implement it exactly how I wanted to. However, I did want to ask for some feedback on this idea that I had. For those of you reading this via your newsreader, come take a visit to the sit...

With the recent mention that IE7 will have proper alpha-PNG support, I predict that we will see an explosion of creativity in web site designs.
I've been pondering this in some of the recent design work that I've seen come out of the company that I work for. Imagine changing an entire colour scheme of a site without having to change a single image; even ones with feathered edges.
On one of these...

Awhile back, Dave Shea offered his CSS debugging tips. The one that I use most often has to be setting the border around the elements I happen to be working on. border:1px solid blue; is practically hotkeyed I use it so much.
I've started to expand on the concept and it's already proving quite useful. The first was to switch from solid borders to dashed borders. They actually make it easier to se...

Okay, I hope I didn't get your hopes up too high. I felt (un)inspired and put together a redesign of good ol' snook.ca.
In the end, though, I don't think I'll ever use it so I've decided to make it available to anyone who feels they can make some good of it. Download the zip and use to your hearts content. I admit that it's still somewhat unpolished -- the comments area needs some style and ther...

Today I submitted my first bug report into Bugzilla. I couldn't find another bug report on the matter but a quick test while trying to duplicate a feature I saw on a site uncovered this little pest.
The style applied to the block element gets applied to the entirety of the child element if it starts on the first line and continues onto subsequent lines.
It'll be interesting to see how things g...

This is really just a reminder for myself. When using the DOM to dynamically hide and show table elements (like a table row), you can't use display = "block" to bring a table row back to life in Firefox; although, it works okay in IE. It's best to simply use display = "" so that Firefox correctly resets it to table-row and IE can still do what it does.
I imagine other browsers behave similarly to...

I got this working in every single browser except Safari. I have a div positioned absolutely within a div positioned relatively and floated within a floated div. I've nicknamed it the "Safari Float-Float Bug" but only because it sounds cool.
I've put together an example that demonstrates the wierd behaviour (you'll need Safari to see the effects).
I don't have a solution as of yet except to avoi...

People handle web page updates in different ways. Some add extra text and bold it so people know it's been updated. Others use ins and del tags to highlight changes. Others couldn't be bothered, make their updates and move on.
Allow me to present a new approach: The Document Version Switcher. The premise is simple. A control on the page allows users to "go back in time" and view previous versions...

The border-collapse property is great but watch out for how your borders behave. You may find yourself in for a surprise.
Why the surprise? Because IE and Opera behave differently than Mozilla in how it handles the table border when in collapse mode.
IE and Opera handle it in a way that feels very intuitive. Any margin and table border simply pushes everything in from the top left of its 'box'. I...

There's two types of items that you'll normally import into a secure HTML page: 1. CSS and 2. Images. The behaviour you'll run into, however, is inconsistent across browsers.
1. CSS
When trying to import a stylesheet from an insecure server (http) using either the link tag or @import into a secure page (https) you'll get some odd behaviour. In IE, the lock to indicate that the page is secure dis...

"Oh, the complexity of those multi-column layouts! It was so much easier with tables!" I hear you say. You'd be surprised at just how easy it can be to put together a multi-column layout with CSS2.1.
UPDATE: I've added a couple cross-browser options along with descriptions.
First, check out the example. If you don't see a nice three column layout then you're using IE. Stop it. Go download Fire...

Dan Cederholm has a great article on implementing a scalable slanted divider between navigation. My issue with it is that the text, especially as you increase or decrease the font size, isn't exactly centered between the slants. To achieve centering, we simply switch from pixels to em's.
Original:
#nav a { padding: 6px 30px 6px 5px; ... }
With em's:
#nav a { padding: 0.5em 2.5em 0.5em 1em; ... }...

The goal of this two-part article is to demonstrate how to create XHTML-compliant tables and how to style them effectively using CSS.
In Part 2, we apply style to the structure of our document that we created in Part 1.
Part 2: Adding Style
The TABLE element
To make our table look good, I'll touch on a few of the more important properties:
border, border-collapse, border-spacing and empty-cell...

A recent article on And all that Marlarkey talks of using a definition list to add more semantics to an e-commerce site. But does it? After reading and re-reading the specs on using a definition list at the W3C, I'll admit that it could be a valid implementation. However, could using a table bring more relevance to the data and still be styled to its fullest?
Yes and no. While a table certainly a...

The goal of this two-part article is to demonstrate how to create XHTML-compliant tables and how to style them effectively using CSS.
In Part 1, we tackle the basic structure of the table.
Part 1: Table Structure
The first step in any web page development is taking the data and marking it up using semantic and standards compliant XHTML. Let's start with a basic example that you've likely used bef...

As it turns out, the conversion from the old design to the new has gone surprisingly well. I hope that came from keeping the new design simple. There's only three images in use... there's the repeating background, the logo, and the horizontal rule. That's it. CSS wise, there's only one font: Arial. My new motto: keep it simple.
My HTML structure has changed enough from the past that there really ...

As has been documented elsewhere, you can use expressions to mimic some nice CSS features that Mozilla already supports.
My quick min-height workaround:
height: expression('32px'); min-height: 32px;
Since IE's height property behaves like min-height, I just set it using expression so that IE is the only browser to recognize the property. All other browsers should see min-height and use according...

it's been mentioned elsewhere numerous times and here it is again: set the body using em's (.75em is good if you like a smaller font than normal) and then use percentages for the rest of the page. Works well for IE, N4 and N6. N4 seems to retain the body size for headings if a specific size hasn't been set on the headers.
An example of this:
body {font-family: Arial, Helvetica, sans-serif; fo...

Interesting article on using expressions for CSS values in IE. The article focuses on mimicking the max-width property available in other browsers. Also, the comments on Andy Budd's site are good for reference.
...

For fun, I put together a mock design for those pink message slips that you tend to find in most offices. The (hopefully) dotted lines are INPUT tags. Now, there are certainly ways that this could be improved... For the areas that look like they should be checkboxes, could be. The reason they're not is purely for style reasons. Anyways, if you find a use for it, let me know...
...

I've decided to try putting together a concept I had for navigation. The idea was to have navigation buttons that appeared to come out from underneath another element. I wanted to try and combine a number of the CSS tips and tricks that are available into one well-implemented example.
The navigation on the site as of this writing uses the Sliding Doors technique. It works well and definitely adds ...

Want to prevent line breaks from occurring on a particular hyphen? There used to be the handy <nobr> tag but despite support in Netscape, IE and even to this day Mozilla, it was never part of the HTML standard. The regular hypen (-) or the n-dash (&ndash;/&8211;) still cause line-breaking in IE. There's the minus sign (&minus;/&#8722;) but while the minus sign prevents IE fro...

Ethan Marcotte's recent rambling on the potential for bloated CSS brings up an interesting quandary: as we move to a more semantic web and HTML gets streamlined, are we simply increasing the complexity and, more importantly, the size of our CSS files to the point where it negates the value of it? Dave Shea talks of 50k CSS files but is this an issue?
Ethan talks of the extra div's, span's and hac...

For those that are familiar with the Fahrner Image Replacement approach to creating a more semantic (and accessible) web is actually inaccessible. A recent article at A List Apart disects the issue with a little more detail. Also, check out a more accessible version of the FIR approach over at sitepoint.
...

In working on a project, I was using "-moz-border-radius" to add a rounded border to some tables. I added the correct doctype and then suddenly the rounded borders disappeared. It would seem that standards mode requires that "px" be specified whereas in quirks mode, it determined the value correctly.
Eg: {-moz-border-radius:20} doesn't work in standards mode but {-moz-border-radius:20px;} does.
...

When it comes to a table-less design using CSS, the float property is the one that gives you great flexibility. Check out Floatutorial: Step by step CSS float tutorial to get you started (or get new ideas).
...

Having worked on numerous bilingual sites, I often run into accented characters and ligatures that don't work in older browsers. Entities such as &trade; and &oelig; don't work in Netscape 4. Luckily, N4's support for numerical entities is much better. &trade; can be replaced with &#8482; and &oelig; can be replaced with &#339;. Check out the W3C's list of character entit...

Two great tools are available to make it easier for us web developers to create table-less designs. First is List-o-matic, a nice little app that steps you through the process of turning a list of items into sleek navigation. The second is Layout-o-matic which allows you to choose a 1, 2, or 3 column layout.
...

Ever wish a word could be conditionally split in the middle? For example, if the word application didn't have room at the end of the line, instead of moving the whole word to the next line, it just hyphenated itself like so: App-[LF]lication. Look into the HTML entity &shy; (the soft hyphen).
Here's the caveats. As it turns out, the only browser that seems to support this properly is Intern...

Hi. My name is Jonathan Snook and this is my site. I write about what interests me, which is usually web design, development, and technology. I'm also in the middle of a food adventure.
I wrote SMACSS. I tweet. Want to learn more?