I use stylelint to keep my CSS in order. Here’s how I configure it.
I don’t use CSS preprocessors they way many people do. Here’s an attempt to explain why.
A number of CSS3 properties that you can use unprefixed or with just a single vendor prefix.
Two different ways of creating a full-width navigation bar with vertically centered links whose entire height is clickable.
A responsive technique for making data tables (or any other element) wider than their parent horizontally scrollable.
Giving an element a height in percent may not do what you expect if its parent does not have an explicit height set.
Images that have dimension attributes in the HTML will retain their height when scaled down with CSS unless you add a height:auto declaration.
If you start seeing mysterious dots rendered on top of positioned elements in Firefox, check your text-overflow and z-index properties.
Sometimes you want to use different images when viewing a web page on screen and when printing it. One way of doing that is to use CSS generated content.
When you use an icon or other graphic instead of text for buttons, make sure there is real text for users who cannot see the image.
A few examples of how you can create a non-rectangular drop shadow that will adapt to the width of the element it is applied to.
If you need to give users the choice to disable responsive layout, here is one way of implementing a switch to toggle it off and on.
When you need to center a floated element horizontally you can’t say “float:center”, but fortunately there are several other ways of solving the problem.
Applying border-radius or box-shadow to fieldset elements that have a legend child element causes strange rendering in some browsers unless you float the legend element.
Using percent to position a background image has its quirks. A workaround is to use calc().
All browsers do not handle vertical scrollbars the same way when calculating the width to match in a media query.
Under some circumstances using a placeholder attribute on text input fields can cause overflow problems in WebKit-based browsers.
Web browsers on small iOS devices auto-zoom many form controls on focus. Here’s why and what you can do about it.
How to use CSS only to customise radio buttons and checkboxes.
It can be useful to know if images are enabled in the browser, so that you can adjust your CSS and JS to make sure that the page is still usable even if images aren’t loaded.
Internet Explorer doesn’t line wrap text in legend elements, which can cause overflow and layout-breaking issues. Here’s how to fix it.
Different browsers on different platforms insert varying amounts of whitespace around text fields. How to remove that whitespace is not completely intuitive, but possible.
Instead of repeating property values in your CSS, you can use the inherit value to make an element inherit a property’s computed value from its parent.
Wrapping advanced CSS in a simple media query rule saves you from worrying about it causing problems for older browsers.
Be careful when using @import rules in CSS files that are concatenated before being deployed.
CSS generated content is announced in some—but not all—screen readers, so use with care.
As text columns become narrower, the risk of long words overflowing increases. Luckily you can use the hyphens and word-wrap CSS properties to prevent it.
When applying CSS to buttons there are some odd behaviours in WebKit browsers for iOS. Luckily there are at least two ways of working around them.
In many situations when we tend to use links to trigger actions we should really be using buttons. Here’s how to use real button elements and make them look like links.
The Firefox default stylesheet uses the !important keyword when declaring line-height for text inputs. You can’t override this from an author stylesheet, so a workaround is necessary.
Some browsers don’t let you center button elements horizontally by assigning auto margins. Bug or not?
How to use generated content to style the numbers of an ordered list separately from the rest of the list item.
Sometimes you may find that a design forces you to clip content. Fortunately CSS3 offers a way of indicating that text has been clipped.
The CSS3 box-sizing property can be incredibly useful when you want flexible widths on elements that also have padding and/or borders. And browser support is rather good.
The Flexible Box Layout Model allows us to align and distribute boxes vertically and horizontally as well as have boxes flex to use all available space.
Using CSS to change the display order of content without also changing the order in the HTML source can cause accessibility issues and should be avoided.
Using display:table to center a page layout vertically works in most browsers. There is an unfortunate issue with some screenreaders to be aware of though.
The W3C CSS Validator is about to add an option where you can choose to have vendor-specific extensions reported as warnings rather than errors, making it easier to find real errors in your CSS.
WebKit-based browsers do not include vertical scrollbars in the viewport width, which goes against the Media Queries specification and differs from Firefox and Opera.
Using display:table to center a page layout vertically works in most browsers. There is an unfortunate issue with some screenreaders to be aware of though.
When using @font-face with typefaces that have multiple weights and styles it’s important to do it correctly, or your CSS will become unwieldy and browsers will have no fallback styles.
Think very carefully before using -webkit-text-size-adjust:none since it will prevent people using WebKit-based browsers from resizing text. Needless to say, that is not user-friendly.
When using CSS 3 properties that still have experimental implementations and use vendor prefixes, also include the non-prefixed version and put it after any vendor-specific properties in your CSS rules.
Instead of spreading CSS intended for different media types over several files, you can use @media rules to combine them into a single file and reduce the number of HTTP requests.
Make sure the alt text most browsers display when an image cannot be rendered is readable. If necessary, specify a text colour for images.
Due to lack of support in Internet Explorer 6, web developers have been avoiding some very useful CSS 2.1 selectors. It’s time to start using them.
Vendor-specific extensions, even if written according to the CSS 2.1 grammar, use property names and values that are not defined in the CSS specification and are invalid.
The fact that most browsers now default to zooming the entire page instead of just changing text size does not take away the need for flexibility in web design.
Making text in legend elements line wrap is tricky, but it can be done in most browsers.
Combining the concept of diagnostic CSS with the Stylish Firefox extension makes it easy to apply CSS that reveals invalid or deprecated HTML to any site you want.
By telling your browser to apply a user stylesheet you can highlight links that open in a new window or point to non-HTML documents, making them less obtrusive.
The order in which you define the different link states affects the result. My preferred order is
When you have to use image replacement for text, choose a method that causes as few problems as possible for as few people as possible.
Using display:none does not always hide content from screen readers like JAWS and Window-Eyes, but there is a workaround.
John Allsopp has written a couple of handy bookmarklets that help you troubleshoot CSS without having to install a browser extension.
Eric Meyer explains the technical reasons for form controls being so hard to style consistently across platforms.
How to use CSS and two images to create flexible, shrinkwrapping, image based link buttons.
A rarely used CSS property comes to the rescue when dealing with oversized content in tables.
The Page Zoom feature has led to people thinking that IE 7 lets the user resize text sized in pixels or absolute units. It does not.
Safari gets support for multi-column layout and the text-stroke and box-shadow CSS properties.
Screenshots from 8 browsers on 4 operating systems showing the effects of CSS applied to form controls.
Various methods of dealing with the incorrect CSS box model used by older versions of Internet Explorer for Windows.
If you’re having problems with print style sheets in Internet Explorer 6, check your use of CSS expressions.
Ten useful tips for writing CSS that is better, more efficient, and easier to maintain.
Messages about missing colours or background-colours are not errors and can often safely be ignored.
Why specifying monospace as a font-family alternative will make Safari render text smaller than other browsers.
Create the visual effect of HTML frames with CSS and make the scrolling area stretch to 100 % height regardless of the amount of content.
Internet Explorer 7 is now layout complete, meaning that no new CSS features will be added, only bug fixes.
Web professionals should be able to specify font size in pixels, but if we do, Internet Explorer users will not be able to change the text size.
How to use CSS to create bar graphs from unordered lists or data tables.
CSS 3 brings us many powerful new CSS selectors. Browser support is currently lacking, but taking a look at what lies ahead is still useful.
CSS background images should only be used for presentational images, not for informational or functional images.
Tantek Çelik recaptures the history and evolution of CSS hacks and filters.
Part 3 of 3 in a series of articles explaining the selectors available in CSS 2.1.
Still using CSS hacks for Internet Explorer? Kick the habit now or you’ll be sorry.
Part 2 of 3 in a series of articles explaining the selectors available in CSS 2.1.
Part 1 of 3 in a series of articles explaining the selectors available in CSS 2.1.
How to use generated content in CSS to insert a check mark symbol after visited links.
Using advanced CSS to create custom corners and borders with multiple background images and generated content.
A discussion on whether using CSS media types to automatically load a print stylesheet may break user expectations when printing web pages.
How to create your own images for my Transparent custom corners and borders technique.
Create a resizable box with custom, transparent corners and borders and no extra markup.
Interesting discussion on how to keep class names non-presentational.
Tips and tricks for writing efficient CSS. Part 2 of 2.
Tips and tricks for writing efficient CSS. Part 1 of 2.
How to use CSS only to change the appearance of the current state of a navigation bar.
Tricks for writing more efficient CSS by using shorthand properties.
How to use CSS to create a horizontal navigation bar out of a simple ordered list.
A problem that I’ve been running into more often in these days of CSS based layouts than I did back in the old table days is the “image-st…
This is a follow-up to my previous post about Styling form controls. For some background info and comments, you may want to read that post…
A question that is frequently asked in forums like the css-discuss mailing list is how to style form controls in a consistent way across p…
Use server side scripting to load a print stylesheet.
In a few recent posts, starting with the one in which he talks about the technique used for Sliding Faux Columns, and continued in CSS Gri…
A few days ago in Flexible box with custom corners and borders I promised to write about something that isn’t about different ways of styl…
This will be the last thing I write about boxes with rounded corners, custom borders or dropshadows for a while. I promise ;) Next time I’…
Time for yet another example of a “flexible boxes with rounded corners” technique. This time I’ve created a flexible news list by styling …
In case you had a look at my CSS teaser box demo from last week, you’ll know that it has one flaw: its width is fixed. I wanted to find a …
Just a little something that may be of use to someone. It’s pretty common for websites to have “teasers” that show an excerpt of a full ar…
Since Internet Explorer doesn’t support the display:table, display:table-row and display:table-cell properties, it obviously messes up the…
Many web designers really like the idea of being able to place two or more containers, or boxes, side by side and make them be of equal he…
In Faux Columns, one of the two articles in the latest issue of A List Apart, Dan Cederholm shows a trick that will make a CSS layout with…
If you enjoyed Max Design’s Listutorial and Floatutorial, you’ll like the new Selectutorial, which is just as informative. This tutorial e…
Today there was a post to the css-discuss mailing list from someone who needed to vent his frustration with CSS. I can definitely understa…
Last week, when A List Apart was relaunched, my favourite article was Doug Bowman’s Sliding Doors of CSS. This week’s ALA brings us Slidin…
Next time you’re styling a border with CSS, try something new. Instead of going from your editor of choice to your browser and back in a l…
Floatutorial is an excellent guide to floating elements. Understanding how floats work and how they can be used can be a bit confusing, so…
Mid Pass Filter is a new CSS hack by Tantek Çelik. This hack is a filter that targets only version 5.x Internet Explorer for Windows brows…
I added another demo page to my Lab section. Soft dropshadow uses background images to create a dropshadow effect. The code is pretty simp…
Today I checked my CSS Frames demo in IE5/Win for the first time. I discovered that things were a bit broken. Hrmm. Ooops. What I thought …
I copied the HTML from Listamatic 2 and started tweaking the CSS I had from a while back when I first tried styling a nested list. The res…
Time for another automatic list generator. Listamatic 2 will generate HTML and CSS for nested lists. Visitors are encouraged to submit the…
Eric Meyer has published a new CSS article at his Complex Spiral Consulting site. The article explains how to use CSS to turn an unordered…
As noted by Matt Haughey, IE5/Mac has problems with recent image replacement techniques (Image Replacement–No Span and A new image replace…
No, I’m not talking about dead insects floating on water here. I’m talking about an incredibly frustrating bug in IE/Win. I encountered th…
Complementing Listamatic, Listutorial explains, step by step, how to use CSS to style HTML lists.
For some time (a few months) I’ve been using lists to mark up things like navigation bars, menus and lists of links. Thanks to the CSS sup…
After taking a close look at Simon Jessey’s fixed sidebars and Eric Bednarz’s position:fixed; fixed for IE5(+)/win I created an example la…
While working on a project at my daytime job I needed to find a good way of using CSS to create a tabbed menu with submenus. I couldn’t fi…
Two new ways of using CSS to replace the text of a header (or any other element) with an image have shown up. The using background-image t…
Back in the old days, if you wanted to center your whole (fixed size) page both horizontally and vertically in the browser window…
I was browsing the entries at the CSS Zen Garden and was inspired by an entry called Friendly Beaches, which has a dropshadow with soft ed…
Hmm… looks like maybe I should start a “How to do it with CSS”-section on this site. The other day I had a closer look at rounded corners,…
I spent some time exploring different ways of creating a box with rounded corners. After checking out how other people have attacked the p…
In CSS 3 Selectors, Russel Dyer writes about CSS selectors, all the way from those included in CSS 1 to those in the recently finished CSS…
Uberlink CSS Rollovers is a nice tutorial at PVII on how to use unordered lists to mark up navigation links, and CSS to spice the links up…
The W3C recently published four CSS3 Candidate Recommendations: CSS3 Text Module, CSS3 Color Module, CSS3 Ruby Module and CSS TV Profile 1…
The CSS Zen Garden is a showcase intended to let graphic artists apply their own designs to the same, properly structured, HTML file simpl…
Read this and realize why littering your code with <div class="blahblah"><span class="bleh"> adds unnecessary bloat and comple…