Google+

Location

Authors

Name: 456 Berea Street

Location: Not Available

Language: Not Available

Url: Not Available

Why I don’t use CSS preprocessors

Whenever I mention that I don’t use CSS preprocessors I tend to get strange looks from people who cannot imagine writing CSS without Sass. And so I have to defend my choice and explain why, over and over. Some people will understand, most won’t. Or they don’t want to. But here’s an attempt to explain my reasoning. Read full postPosted in CSS.Copyright © Roger Johansson

1 0 0 0
Login to proceed

Cancel

Ok Cancel


Cancel
Hours
Cancel
Firefox and the magical text-overflow:ellipsis z-index

A while ago I received a strange bug report for a site I’d been working on. The report mentioned dots appearing on top of a dropdown menu when it was expanded. I had a look in Safari, could not see any dots, but then tried Firefox. And sure enough, there were sets of three dots in the dropdown menu. It didn’t take long to find the cause, fortunately. Just below the dropdown menu was a list of news items whose text-overflow value was set to ellipsis. The dots in the dropdown menu were the ellipsis characters peeking through, or being rendered on top of, the dropdown’s background. After checking in a lot of different browsers I can only replicate this in Firefox. Apparently the ellipsis rendered by text-overflow gets a z-index that is higher than the element it is applied to. It also appears above any absolutely or relatively positioned elements that come before the element with text-overflow in the source order, unless those elements have a z-index value greater than 0. Read full postPosted in CSS, Browsers.Copyright © Roger Johansson

1 0 0 0
Login to proceed

Cancel

Ok Cancel


Cancel
Hours
Cancel
How to proportionally scale images that have dimension attributes

Allowing images to scale along with their container is an important part of responsive web design (and was so even before the term “responsive web design” existed). It’s really quite easy – all you need to do is give the image a width (or max-width) in percent. This will prevent any img element from getting wider than its container. If the container is narrower than the image, the image will scale down. But there is a catch. Read full postPosted in CSS.Copyright © Roger Johansson

1 0 0 0
Login to proceed

Cancel

Ok Cancel


Cancel
Hours
Cancel
Height in percent when parent has min-height and no height

When trying to force an element to always extend to the height of its parent I ran into some peculiar browser behaviour that I thought was worth mentioning. Here’s the situation: The parent element has a min-height specified (in pixels), but no height The child’s height is set to 100% I was expecting the child to get the same height as its parent, but that is not what happens. What happens instead may well be according to the CSS 2.1 Specification, but a bit nonintuitive, at least to me. Read full postPosted in CSS.Copyright © Roger Johansson

1 0 0 0
Login to proceed

Cancel

Ok Cancel


Cancel
Hours
Cancel
Responsive drop shadows

Back in the ancient days of fixed-width web design, adding a drop shadow to an element used to be a matter of exporting an image containing the shadow from Photoshop and placing it as a background image on the element. Job done. However, if you want some flexibility (as many of us have always wanted) it isn’t quite that easy. Sure, if you have a straight drop shadow that can be created with a CSS box-shadow declaration, it will expand and contract as necessary to fit the width of the element it is applied to. But if the design calls for a slightly more complex shadow you need to do a bit more. I’ve had to do this a number of times and thought I’d share a couple of tricks.Read full postPosted in CSS.Copyright © Roger Johansson

1 0 0 0
Login to proceed

Cancel

Ok Cancel


Cancel
Hours
Cancel
Conditional sibling class names for IE patching

Traditionally, web developers have been using either CSS hacks or conditional comments to target different versions of Internet Explorer with CSS fixes. In the last few years more and more people have started using conditional class names, more or less as described by Paul Irish in Conditional Stylesheets vs CSS Hacks? Answer: Neither!. I’ve always favoured separating IE fixes from the main CSS by putting them in one or sometimes two separate files loaded via conditional comments. However, a valid argument against that is that keeping the patches in the same file as the main CSS increases maintainability since you’re less likely to forget about the patches when updating the main CSS. That problem can be solved by using conditional comments to add class names to the html element depending on which version of IE is used. The problem is that it can create plenty of HTML bloat since you need to repeat the opening HTML tag – including any attributes it has – for every version of IE that you want to target. So I started thinking that maybe there is a different way. And there is, though it too has its drawbacks. Nevertheless, here’s another way of solving the problem.Read full postPosted in Browsers, CSS.Copyright © Roger Johansson

1 0 0 0
Login to proceed

Cancel

Ok Cancel


Cancel
Hours
Cancel
Using a transparent image as an icon fallback

Sometimes designs contain button styling that is difficult to create with CSS alone. The “official” way of dealing with this is to either use an image button ( ) or put the image in a button element ( ). However if the graphic you want to show instead of the button is part of a sprite image, or if you want to display a different image when the button is hovered over or receives focus, that won’t work. In these cases it can be tempting to just use a background image and move any text the button contains out of the way by positioning it off-screen or applying a bit of text-indent. Or even worse, use no text content at all. Using no text content at all is obviously no good to anyone who can’t see the image, like screen reader users. And hiding the text causes problems if the image can’t be displayed. Much of this is covered by Nicholas C. Zakas in Making accessible icon buttons, and I thought I’d talk a bit more about a technique he mentions that I use in these situations – the transparent one pixel image.Read full postPosted in Accessibility, Browsers, CSS.Copyright © Roger Johansson

1 0 0 0
Login to proceed

Cancel

Ok Cancel


Cancel
Hours
Cancel
Replacing images when printing

It isn’t all that uncommon that, after you’ve polished your print stylesheet to make a site look well on paper as well as on screen, you realise that the logo really doesn’t look its best. It may look blurry or pixelated on paper due to having a pixel density intended for screen viewing, of course. But even worse, its edges may look ugly or it may actually be invisible because whatever is behind it when viewed on screen isn’t printed. Applying a background colour to the logo image or its containing element in the print CSS isn’t going to help either since most browsers by default do not print backgrounds at all. If you can’t change the image used for screen so that it will look good in print as well, you need to somehow make browsers use a different image when printing. One way of doing that is by using CSS generated content.Read full postPosted in CSS.Copyright © Roger Johansson

1 0 0 0
Login to proceed

Cancel

Ok Cancel


Cancel
Hours
Cancel