Still No CSS Reset
04 Oct 2023
It was interesting to read Chris Coyier’s recent post about Andy Bell’s recent post. It made me think of my personal projects and remembering that I didn’t use a reset for any of them. Well, sort of. The only thing that I consistently have across all of my projects is body { margin:0; }. I say sort of because this doesn’t stand alone as part of a “reset”—it sits with all of t...
Overlapping Header with CSS Grid
18 May 2020
I have this design. Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom and then the body gets a margin-top: -50px or whatever the design calls for. Since I knew I was going to be using Grid for the shell of this page, I wondered if there was an easy way to do this. I set up the page using three columns and four r...
A .Button is a Button is a Link
05 May 2020
You’re working on a project and in it you see a button. It looks like a button, it acts like a button. It is a button. It is a <button>. It is a .button. But is every <button> a .button? Is every .button a <button>? Let’s take a look at some very specific examples: We essentially have three different types of buttons: Image-only buttons (the next/previou...
Playing with CSS Grid
06 Feb 2020
I’ve been working on this site, Fifty, to track a list of restaurants that I’ve been to. Each new restaurant was a list item. The list will eventually reach 50 items and a long list is long and visually uninteresting. The first attempt was to use CSS columns. I threw on a column-width and bam. Slightly more visually interesting—at least, on larger screens. It’s still just an ordere...
Leggo My Pattern Library Analogy
07 Jul 2019
When you think of a pattern library (or design system), what analogy comes to mind? Lego? If I had a Lego piece for every time somebody used Lego as a pattern library analogy, I’d be able to build the Death Star. Lego is pretty awesome but also difficult to replicate a design without detailed piece-by-piece instructions. Someone hands you a box of Lego and tells you to build an interface ...
Understanding the Albatross
14 Jan 2019
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...
Preventing Icon Wrap After Text
12 Jul 2018
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...
Notes on Font Stacks for CJK
02 Jul 2018
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...
Animating Progress
23 Apr 2018
“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...
The Open Graph and Sharing Tags
09 Jan 2018
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...
Calendar with CSS Grid
08 Dec 2017
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...
Container Grids
24 Apr 2017
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 ...
Template Technology Agnosticism
18 Apr 2017
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, ...
CSS Concerns
03 Mar 2017
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...
Coding CSS for Context
10 Feb 2017
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...
Mixed Content and Responsive Images
24 Jan 2017
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....
How Will Web Components Change CSS Architecture?
11 Jul 2016
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...
Avoid Overstyling Base Styles
06 Jun 2016
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...
Semantic CSS
26 May 2016
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...
Considerations in Component Design
24 May 2016
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...
Dealing with the Cascade and Specificity
23 May 2016
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...
All or Nothing
18 May 2016
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...
More Meaningful CSS
17 May 2016
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 ...
Educating Users In App
19 Apr 2016
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...
Are you Single?
05 Apr 2016
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...
Will Change
15 Mar 2016
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...
User Generated Content in a Classy World
06 Mar 2016
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 ...
Simplest CSS Slideshow
05 Jan 2016
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...
Icons and Type
26 Apr 2015
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...
Windows Substitutes Helvetica for Arial
03 Feb 2015
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...
Specificity Graphs
19 Nov 2014
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...
Evolving Code: From the Crust to the Core
17 Nov 2014
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...
Rethinking the Grid
09 Aug 2014
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...
Floated Label Pattern with CSS Only
11 Feb 2014
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 ...
Previous Parent
22 Sep 2012
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...
One Module or Two
01 Sep 2012
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...
Handling Overflow
27 Jun 2012
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 ...
Project Detritus
24 Apr 2012
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...
Definition Lists versus Tables
25 Mar 2012
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...
Prefixed Classes in Bootstrap
21 Feb 2012
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...
Naming Convention in CSS
24 Jan 2012
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...
Thinking about CSS Architecture
26 Sep 2011
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...
Yellow Fade Technique with CSS Animations
24 Sep 2011
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...
Sizing with CSS3's vw and vh units
20 Aug 2011
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...
IE8 bug with max-width and overflow
03 Aug 2011
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...
A Modest Proposal for CSS3 Animations
29 Jul 2011
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...
Font sizing with rem
01 May 2011
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...
Absolutely Positioned Textareas
31 Mar 2011
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:...
Hiding Content for Accessibility
25 Feb 2011
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...
Fieldset Nested in a List Item Bug in Firefox
14 Dec 2010
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...
Why we don't have a parent selector
10 Oct 2010
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...
Changing Display Resets Scroll Offset
10 Jun 2010
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; ...
Vendors using Competing Prefixes
11 May 2010
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...
Font-face in Chrome
02 Apr 2010
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...
HTML5 Forms Are Coming
26 Mar 2010
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...
Not Supported
22 Mar 2010
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...
Background Position X and Y
02 Mar 2010
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...
Multiple Backgrounds and CSS Gradients
01 Feb 2010
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...
Safari and Transparent Borders
23 Jan 2010
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, with ...
Becoming a Font Embedding Master
07 Oct 2009
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...
Screencast: Converting OTF or TTF to EOT
06 Oct 2009
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...
Text Rotation with CSS
28 Jul 2009
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...
Fixed Position and Opacity Filter Bug in Internet Explorer
07 May 2009
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...
Shifting my Opinion on CSS Animations
05 May 2009
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 ...
Creating Desktop Applications with Titanium
17 Apr 2009
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...
Matrix Layouts
13 Mar 2009
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? ...
Alpha PNGs in Internet Explorer 6
08 Dec 2008
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...
Rounded Corners in Internet Explorer
03 Dec 2008
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...
Tiling Backgrounds in Internet Explorer
18 Sep 2008
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 Experiment in Rounded Corners
18 Aug 2008
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...
No CSS Reset
17 Apr 2008
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...
Content Overlay with CSS
26 Mar 2008
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...
6 Keys to Understanding Modern CSS-based Layouts
08 Aug 2007
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. ...
Creating a Page Break
02 Aug 2007
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...
Understanding Pseudo-elements
08 Jul 2007
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 ...
Unicode for CSS Class Names
12 Jun 2007
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"> ...
position:relative and overflow in Internet Explorer
04 Mar 2007
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> ...
Use of ADDRESS Element
01 Jan 2007
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...
It's not Divitis
14 Dec 2006
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...
Review: XHTMLGenius
13 Dec 2006
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...
List of HTML/CSS Services
13 Nov 2006
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 ...
The Commoditization of HTML
29 Oct 2006
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...
Top CSS Tips
20 Sep 2006
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...
Stackable CSS Columns
07 Sep 2006
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...
Understanding CSS Specificity
23 Aug 2006
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...
Displaying Percentages in a Progress Bar
15 Aug 2006
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...
Reboot: The CSS
06 May 2006
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...
Trimming Long Outlines in Firefox
05 May 2006
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...
Targeting IE7 using CSS
27 Mar 2006
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...
Inheriting Link Colour
20 Mar 2006
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...
Excessive Elements
18 Mar 2006
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>...
Which is better: HTML or XHTML?
04 Jan 2006
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? ...
Snook's Resizable Underlines
01 Nov 2005
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 ...
footerStickAlt
29 Aug 2005
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. ...
Bookmark: Accessible Data Tables
05 Jul 2005
Some fantastic research has been done by Roger Hudson. He and a number of participants tested different techniques for creating accessible data tables. ...
Fuel Games: Managing SEO
09 Jun 2005
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...
Comments: Behind the Scenes
18 May 2005
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...
I'm an addict.
13 May 2005
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...
An experiment with INS and DEL
05 May 2005
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 a background image to a table row
03 May 2005
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...
Experiment with position:fixed
25 Apr 2005
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...
Explosion of design
23 Apr 2005
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...
CSS Debugging
21 Apr 2005
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...
Problems using white-space:nowrap in Internet Explorer
11 Apr 2005
Let's jump right into it with some sample code: #example1 { width:300px; border:1px solid #666; background-color:#FEE; } #example1 a { white-space:nowrap; padding:0 10px; } <div id="example1"> <a href="#">Link One</a> | <a href="#">Link Two</a> | <a href="#">Another test</a> | <a href="#">Yet another test</a> </div> I also put t...
Unused Design Giveaway!
31 Mar 2005
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...
:first-line bug in Firefox
21 Mar 2005
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...
Dynamically showing and hiding table rows
28 Feb 2005
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...
The Document Version Switcher
12 Dec 2004
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...
Opposites Attract in Internet Explorer
07 Sep 2004
Let's start off with the code example: this is sample text <div style="padding:15px;"> <div><span style="margin-left: -16px; padding-left:15px; background-color: #CCC; border:none;">this </span>is sample text</div> </div> What happens in IE and Mozilla is that the background appears to start 16 pixels to the left. Perfect, ...
The border-collapse dilemma
06 Sep 2004
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...
Default Mac or PC Fonts
31 Aug 2004
A list of default fonts on OSX and System 7 over at Microsoft. There's also Code Style which covers most popular fonts over different platforms. ...
Importing CSS and images into a secure page
30 Jul 2004
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...
Custom Borders and Corners
23 Jul 2004
Just needed to bookmark this from 456 Bera Street: Flexible box with custom corners and borders ...
Getting your DIVs to behave like TABLEs
15 Jul 2004
"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...
Improved Bulletproof Slants
13 Jul 2004
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; ... }...
label bug in Netscape 6
05 Jul 2004
Applying style to the label tag makes it disappear. Add a span tag inside and apply the style to the span instead. ...
Designing Data Part 2: Adding Style
13 Jun 2004
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...
Definition List or Table?
10 Jun 2004
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...
Designing Data Part 1: Table structure
08 Jun 2004
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...
Keep it simple
05 Jun 2004
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 ...
min-height
26 Apr 2004
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...
best way to set up resizable fonts
22 Apr 2004
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...
Using CSS expressions in IE
19 Feb 2004
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. ...
List of CSS-only hacks
20 Jan 2004
Just needed to bookmark this list of CSS hacks. Very thorough and very useful. ...
Take a message!
09 Jan 2004
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... ...
CSS Navigation Example
25 Nov 2003
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 ...
Sortable HTML Tables
21 Nov 2003
A nice tutorial on creating sortable tables. Just by adding a class to a table. ...
Tabbed Navigation using CSS
04 Nov 2003
For those who wish to push tabbed navigation to the limit, check out Sliding Doors of CSS, Part II from A List Apart. ...
semi-transparent and stuff
30 Oct 2003
Just a couple URL's to bookmark: Cross-browser semi-transparent backgrounds CSS-based menus enhanced for Mozilla, Opera, and Safari ...
line breaks and the hyphen
27 Oct 2003
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 (–/&8211;) still cause line-breaking in IE. There's the minus sign (−/−) but while the minus sign prevents IE fro...
Is bloated CSS the new HTML?
27 Oct 2003
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...
Don't be so shy
09 Jul 2003
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 ­ (the soft hyphen). Here's the caveats. As it turns out, the only browser that seems to support this properly is Intern...