Html And Css

Overlapping Header with CSS Grid

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

Read it all »

A .Button is a Button is a Link

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

Read it all »

Playing with CSS Grid

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

Read it all »

Leggo My Pattern Library Analogy

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

Read it all »

Understanding the Albatross

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

Read it all »

Preventing Icon Wrap After Text

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

Read it all »

Notes on Font Stacks for CJK

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

Read it all »

Animating Progress

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

Read it all »

Safari display:contents bug

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

Read it all »

The Open Graph and Sharing Tags

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

Read it all »

Calendar with CSS Grid

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

Read it all »

Container Grids

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

Read it all »

Template Technology Agnosticism

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

Read it all »

CSS Concerns

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

Read it all »

Coding CSS for Context

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

Read it all »

Mixed Content and Responsive Images

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

Read it all »

How Will Web Components Change CSS Architecture?

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

Read it all »

Avoid Overstyling Base Styles

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

Read it all »

Semantic CSS

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

Read it all »

Considerations in Component Design

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

Read it all »

Dealing with the Cascade and Specificity

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

Read it all »

All or Nothing

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

Read it all »

More Meaningful CSS

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

Read it all »

Educating Users In App

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

Read it all »

Are you Single?

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

Read it all »

Will Change

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

Read it all »

User Generated Content in a Classy World

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

Read it all »

Simplest CSS Slideshow

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

Read it all »

Icons and Type

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

Read it all »

Windows Substitutes Helvetica for Arial

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

Read it all »

Specificity Graphs

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

Read it all »

Evolving Code: From the Crust to the Core

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

Read it all »

Rethinking the Grid

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

Read it all »

Floated Label Pattern with CSS Only

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

Read it all »

Previous Parent

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

Read it all »

One Module or Two

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

Read it all »

Handling Overflow

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

Read it all »

Project Detritus

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

Read it all »

Definition Lists versus Tables

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

Read it all »

Prefixed Classes in Bootstrap

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

Read it all »

Naming Convention in CSS

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

Read it all »

Thinking about CSS Architecture

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

Read it all »

Yellow Fade Technique with CSS Animations

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

Read it all »

Sizing with CSS3's vw and vh units

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

Read it all »

IE8 bug with max-width and overflow

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

Read it all »

A Modest Proposal for CSS3 Animations

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

Read it all »

Font sizing with rem

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

Read it all »

Absolutely Positioned Textareas

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

Read it all »

Hiding Content for Accessibility

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

Read it all »

Fieldset Nested in a List Item Bug in Firefox

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

Read it all »

Why we don't have a parent selector

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

Read it all »

Changing Display Resets Scroll Offset

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

Read it all »

Vendors using Competing Prefixes

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

Read it all »

Font-face in Chrome

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

Read it all »

HTML5 Forms Are Coming

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

Read it all »

Not Supported

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

Read it all »

Background Position X and Y

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

Read it all »

Multiple Backgrounds and CSS Gradients

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

Read it all »

Safari and Transparent Borders

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

Read it all »

Becoming a Font Embedding Master

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

Read it all »

Screencast: Converting OTF or TTF to EOT

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

Read it all »

Text Rotation with CSS

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

Read it all »

Fixed Position and Opacity Filter Bug in Internet Explorer

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

Read it all »

Shifting my Opinion on CSS Animations

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

Read it all »

Creating Desktop Applications with Titanium

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

Read it all »

Matrix Layouts

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

Read it all »

Alpha PNGs in Internet Explorer 6

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

Read it all »

Rounded Corners in Internet Explorer

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

Read it all »

Tiling Backgrounds in Internet Explorer

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

Read it all »

An Experiment in Rounded Corners

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

Read it all »

No CSS Reset

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

Read it all »

Content Overlay with CSS

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

Read it all »

6 Keys to Understanding Modern CSS-based Layouts

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

Read it all »

Creating a Page Break

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

Read it all »

Understanding Pseudo-elements

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

Read it all »

Unicode for CSS Class Names

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

Read it all »

position:relative and overflow in Internet Explorer

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

Read it all »

Use of ADDRESS Element

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

Read it all »

It's not Divitis

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

Read it all »

Review: XHTMLGenius

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

Read it all »

List of HTML/CSS Services

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

Read it all »

The Commoditization of HTML

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

Read it all »

Top CSS Tips

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

Read it all »

Stackable CSS Columns

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

Read it all »

Understanding CSS Specificity

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

Read it all »

Displaying Percentages in a Progress Bar

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

Read it all »

Reboot: The CSS

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

Read it all »

Trimming Long Outlines in Firefox

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

Read it all »

Targeting IE7 using CSS

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

Read it all »

Inheriting Link Colour

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

Read it all »

Excessive Elements

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

Read it all »

Which is better: HTML or XHTML?

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

Read it all »

Snook's Resizable Underlines

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

Read it all »

footerStickAlt

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

Read it all »

Bookmark: Accessible Data Tables

Some fantastic research has been done by Roger Hudson. He and a number of participants tested different techniques for creating accessible data tables. ...

Read it all »

Fuel Games: Managing SEO

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

Read it all »

Comments: Behind the Scenes

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

Read it all »

I'm an addict.

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

Read it all »

An experiment with INS and DEL

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

Read it all »

Applying a background image to a table row

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

Read it all »

Experiment with position:fixed

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

Read it all »

Explosion of design

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

Read it all »

CSS Debugging

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

Read it all »

Problems using white-space:nowrap in Internet Explorer

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

Read it all »

Unused Design Giveaway!

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

Read it all »

:first-line bug in Firefox

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

Read it all »

Dynamically showing and hiding table rows

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

Read it all »

Safari bug? Float, float, relative, absolute.

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

Read it all »

The Document Version Switcher

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

Read it all »

Opposites Attract in Internet Explorer

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

Read it all »

The border-collapse dilemma

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

Read it all »

Default Mac or PC Fonts

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

Read it all »

Importing CSS and images into a secure page

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

Read it all »

Custom Borders and Corners

Just needed to bookmark this from 456 Bera Street: Flexible box with custom corners and borders ...

Read it all »

Getting your DIVs to behave like TABLEs

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

Read it all »

Improved Bulletproof Slants

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

Read it all »

label bug in Netscape 6

Applying style to the label tag makes it disappear. Add a span tag inside and apply the style to the span instead. ...

Read it all »

Designing Data Part 2: Adding Style

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

Read it all »

Definition List or Table?

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

Read it all »

Designing Data Part 1: Table structure

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

Read it all »

Keep it simple

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

Read it all »

min-height

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

Read it all »

best way to set up resizable fonts

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

Read it all »

Using CSS expressions in IE

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

Read it all »

List of CSS-only hacks

Just needed to bookmark this list of CSS hacks. Very thorough and very useful. ...

Read it all »

Take a message!

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

Read it all »

CSS Navigation Example

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

Read it all »

Sortable HTML Tables

A nice tutorial on creating sortable tables. Just by adding a class to a table. ...

Read it all »

Rounded corner using CSS

Just needed to bookmark this one. Rounded Corners for All ...

Read it all »

ReUSEIT Contestants

The list of contestants are in for the ReUSEIT contest. While I put together an exhibit, I never actually put in an entry into the contest. There's definitely some great designs in the bunch! ...

Read it all »

Tabbed Navigation using CSS

For those who wish to push tabbed navigation to the limit, check out Sliding Doors of CSS, Part II from A List Apart. ...

Read it all »

semi-transparent and stuff

Just a couple URL's to bookmark: Cross-browser semi-transparent backgrounds CSS-based menus enhanced for Mozilla, Opera, and Safari ...

Read it all »

line breaks and the hyphen

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

Read it all »

Is bloated CSS the new HTML?

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

Read it all »

All about Fahrner

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

Read it all »

Use of "-moz-border-radius" CSS property in Standards Mode

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

Read it all »

The CSS Mid Pass Filter for IE5.x/Win

The Mid Pass Filter trick allows you to specify a stylesheet that will only be used in Internet Explorer 5 or 5.5 for Windows. ...

Read it all »

Using the Float property in CSS

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

Read it all »

Know your entities!

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

Read it all »

Two great tools

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

Read it all »

ReUseit

There's a contest on to redesign Jakob Nielsen's useit.com site. I thought it pretty interesting and I wanted to test out my skills so I added my own entry to the exhibition. ...

Read it all »

Don't be so shy

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

Read it all »