CSS
Linting CSS with stylelint
I use stylelint to keep my CSS in order. Here’s how I configure it.
Why I don’t use CSS preprocessors
I don’t use CSS preprocessors they way many people do. Here’s an attempt to explain why.
Cutting down on vendor prefixes
A number of CSS3 properties that you can use unprefixed or with just a single vendor prefix.
Full-width justified vertically centered navbar
Two different ways of creating a full-width navigation bar with vertically centered links whose entire height is clickable.
Responsive scrollable tables
A responsive technique for making data tables (or any other element) wider than their parent horizontally scrollable.
Height in percent when parent has min-height and no height
Giving an element a height in percent may not do what you expect if its parent does not have an explicit height set.
How to proportionally scale images that have dimension attributes
Images that have dimension attributes in the HTML will retain their height when scaled down with CSS unless you add a height:auto declaration.
Firefox and the magical text-overflow:ellipsis z-index
If you start seeing mysterious dots rendered on top of positioned elements in Firefox, check your text-overflow and z-index properties.
Replacing images when printing
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.
Using a transparent image as an icon fallback
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.
Responsive drop shadows
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.
Letting users disable responsive layout
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.
How to shrinkwrap and center elements horizontally
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.
Fieldset, legend, border-radius and box-shadow
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.
CSS background-position and percent
Using percent to position a background image has its quirks. A workaround is to use calc().
Media Query width and vertical scrollbars
All browsers do not handle vertical scrollbars the same way when calculating the width to match in a media query.
The mysterious WebKit placeholder overflow bug
Under some circumstances using a placeholder attribute on text input fields can cause overflow problems in WebKit-based browsers.
iOS WebKit browsers and auto-zooming form controls
Web browsers on small iOS devices auto-zoom many form controls on focus. Here's why and what you can do about it.
Accessible custom checkboxes and radio buttons
How to use CSS only to customise radio buttons and checkboxes.
Using JavaScript to check if images are enabled
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.
How to line wrap text in legend elements, even in IE
Internet Explorer doesn't line wrap text in legend elements, which can cause overflow and layout-breaking issues. Here's how to fix it.
Removing whitespace around text fields
Different browsers on different platforms insert varying amounts of whitespace around text fields. How to remove that whitespace is not completely intuitive, but possible.
Use inherit to reduce repetition of CSS property values
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.
Tell CSS that JavaScript is available ASAP
When you need to apply different styling depending on the availability of JavaScript, you want to let CSS know whether JS is on or not as soon as possible during page load.
Using media queries to hide CSS3 from older browsers
Wrapping advanced CSS in a simple media query rule saves you from worrying about it causing problems for older browsers.
Beware of @import rules when concatenating CSS files
Be careful when using @import rules in CSS files that are concatenated before being deployed.
CSS generated content and screen readers
CSS generated content is announced in some - but not all - screen readers, so use with care.
Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap
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.
Styling buttons in iOS WebKit and -webkit-appearance:none
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.
Styling button elements to look like links
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.
Line-height in input fields
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.
Centering button elements and input buttons
Some browsers don't let you center button elements horizontally by assigning auto margins. Bug or not?
Styling ordered list numbers
How to use generated content to style the numbers of an ordered list separately from the rest of the list item.
Clipping text with CSS3 text-overflow
Sometimes you may find that a design forces you to clip content. Fortunately CSS3 offers a way of indicating that text has been clipped.
Controlling width with CSS3 box-sizing
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 CSS3 Flexible Box Layout (flexbox)
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.
Source order and display order should match
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.
Flexible height vertical centering with CSS, beyond IE7
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.
CSS Validator to report vendor-specific extensions as warnings, not errors
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.
Media queries, viewport width, scrollbars, and WebKit browsers
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.
Flexible height vertical centering with CSS, beyond IE7
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.
Only use ems for the total width of em-based layouts
For em-based layouts, using ems to specify column widths can cause problems when text size is increased. Using percentages for columns width is often a better choice.
@font-face tip: define font-weight and font-style to keep your CSS simple
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.
YUI Compressor and CSS media queries
Older versions of YUI Compressor have a bug that makes some media queries malformed after minifying, causing browsers to skip the rules within. There is a fix though.
How to create a 3-column layout with CSS
A tutorial that explains how to use the CSS float property to create layouts with three or more columns.
Beware of -webkit-text-size-adjust:none
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.
Parts of CSS3 in Internet Explorer now with CSS3 PIE
Progressive Internet Explorer uses Behaviors to emulate several of the most popular CSS3 properties like border-radius and box-shadow in IE versions 6-8.
Remember non-vendor-prefixed CSS 3 properties (and put them last)
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.
CSS efficiency tip: use a single stylesheet file for multiple media
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.
Specify a text colour for img elements
Make sure the alt text most browsers display when an image cannot be rendered is readable. If necessary, specify a text colour for images.
Forgotten CSS selectors
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 are invalid CSS
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.
Page zoom does not mean the end of flexibility
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.
Find and highlight HTML elements with FireFinder for FireBug
Robert Nyman's FireFinder plugin for Firebug lets you quickly find and highlight HTML elements that match a CSS selector or XPath expression. Very handy.
Line wrapping text in legend elements
Making text in legend elements line wrap is tricky, but it can be done in most browsers.
Hiding with CSS: Problems and solutions
Be aware that using display:none to hide elements will hide them from screen readers, and if you use JavaScript to show something, also use JavaScript to hide it.
Use CSS Diagnostics with Stylish to find bad HTML
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.
Reveal new window links and links to non-HTML files with a user stylesheet
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 of link pseudo-classes matters
The order in which you define the different link states affects the result. My preferred order is :link, :visited, :hover, :focus, :active.
Choose an accessible image replacement method
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.
Screen readers sometimes ignore display:none
Using display:none does not always hide content from screen readers like JAWS and Window-Eyes, but there is a workaround.
CSS diagnostics with XRAY and MRI
John Allsopp has written a couple of handy bookmarklets that help you troubleshoot CSS without having to install a browser extension.
Is it time for CSS 2.2?
Is it time to form a 2nd Generation CSS Samurai to create a CSS 2.2 specification?
Creating bulletproof graphic link buttons with CSS
How to use CSS and two images to create flexible, shrinkwrapping, image based link buttons.
How to prevent HTML tables from becoming too wide
A rarely used CSS property comes to the rescue when dealing with oversized content in tables.
IE 7 does not resize text sized in pixels
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.
Browser testing CSS and JavaScript
My preferred CSS and JavaScript browser testing order.
Styling form controls with CSS, revisited
Screenshots from 8 browsers on 4 operating systems showing the effects of CSS applied to form controls.
Internet Explorer and the CSS box model
Various methods of dealing with the incorrect CSS box model used by older versions of Internet Explorer for Windows.
IE expressions ignore CSS media types
If you're having problems with print style sheets in Internet Explorer 6, check your use of CSS expressions.
CSS Validator colour warnings are not errors
Messages about missing colours or background-colours are not errors and can often safely be ignored.
Transparent custom corners and borders, version 2
A technique that combines CSS and JavaScript to create flexible boxes with custom corners and borders and optional alpha transparency.
CSS Frames v2, full-height
Create the visual effect of HTML frames with CSS and make the scrolling area stretch to 100 % height regardless of the amount of content.
Base elements cause text selection problems in IE
When an HTML document contains a base element and text in floated elements, the text becomes almost unselectable in Internet Explorer.
New clearing method needed for IE7?
Internet Explorer 7 is now layout complete, meaning that no new CSS features will be added, only bug fixes.
Writing cross-browser CSS
Some advice that will help you avoid common problems when creating cross-browser CSS.
Setting font size in pixels
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.
CSS 3 selectors explained
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 2.1 selectors, Part 3
Part 3 of 3 in a series of articles explaining the selectors available in CSS 2.1.
CSS 2.1 selectors, Part 2
Part 2 of 3 in a series of articles explaining the selectors available in CSS 2.1.
CSS 2.1 selectors, Part 1
Part 1 of 3 in a series of articles explaining the selectors available in CSS 2.1.
Check marking visited links
How to use generated content in CSS to insert a check mark symbol after visited links.
Custom borders with advanced CSS
Using advanced CSS to create custom corners and borders with multiple background images and generated content.
Print-friendly CSS and usability
A discussion on whether using CSS media types to automatically load a print stylesheet may break user expectations when printing web pages.
Customising custom corners and borders
How to create your own images for my Transparent custom corners and borders technique.
Transparent custom corners and borders
Create a resizable box with custom, transparent corners and borders and no extra markup.
Fixed or fluid width? Elastic!
A quick explanation of the concept of elastic width layouts.
CSS tips and tricks, Part 2
Tips and tricks for writing efficient CSS. Part 2 of 2.
CSS tips and tricks, Part 1
Tips and tricks for writing efficient CSS. Part 1 of 2.
Setting the current menu state with CSS
How to use CSS only to change the appearance of the current state of a navigation bar.
Efficient CSS with shorthand properties
Tricks for writing more efficient CSS by using shorthand properties.
Turning a list into a navigation bar
How to use CSS to create a horizontal navigation bar out of a simple ordered list.
Clearing floated images in body text
Styling even more form controls
Styling form controls
Grids, tables, CSS
Inverted Sliding Doors Tabs
Flexible box with custom corners and borders
Flexible news list
CSS teaser box revisited
CSS Teaser Box
Equal height boxes with CSS, part II
Equal height boxes with CSS
A List Apart #167
Liquid layout and web standards
Trim your CSS
CSS Selectors explained
The difficulties of learning CSS
CSS Best Practices
Really advanced CSS
More Sliding Doors
CSS Borders
Image tabs
Float it
Mid Pass Filter
Soft dropshadow
CSS Frames updated
Nested Lists Tabs
Listamatic 2
Rounding Tab Corners
Image Replacement for IE5/Mac
Floating bugs
More lists
Lists of lists
More CSS Tabs
CSS Frames
CSS Tabs
Image replacement techniques
Complex CSS layout
Before: Tag Soup. After: CSS Clutter
Centering with CSS
Back in the old days, if you wanted to center your whole (fixed size) page both horizontally and vertically in the browser window…