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.
@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.
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.
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.
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.
Why styling form controls with CSS is problematic
Eric Meyer explains the technical reasons for form controls being so hard to style consistently across platforms.
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.
New CSS properties in Safari
Safari gets support for multi-column layout and the text-stroke and box-shadow CSS properties.
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.
Useful tips for writing efficient CSS
Ten useful tips for writing CSS that is better, more efficient, and easier to maintain.
CSS Validator colour warnings are not errors
Messages about missing colours or background-colours are not errors and can often safely be ignored.
Font size inconsistencies with font-family: monospace
Why specifying monospace as a font-family alternative will make Safari render text smaller than other browsers.
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.
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.
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.
Styled bar graphs marked up as lists or tables
How to use CSS to create bar graphs from unordered lists or data tables.
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.
Use CSS background images responsibly
CSS background images should only be used for presentational images, not for informational or functional images.
The history of CSS hacks
Tantek Çelik recaptures the history and evolution of CSS hacks and filters.
CSS 2.1 selectors, Part 3
Part 3 of 3 in a series of articles explaining the selectors available in CSS 2.1.
Stop using CSS hacks now
Still using CSS hacks for Internet Explorer? Kick the habit now or you’ll be sorry.
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.
Class Presentation
Interesting discussion on how to keep class names non-presentational.
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
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…
Styling even more form controls
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…
Styling form controls
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…
Printing stylesheets
Use server side scripting to load a print stylesheet.
Grids, tables, CSS
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…
Inverted Sliding Doors Tabs
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…
Flexible box with custom corners and borders
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’…
Flexible news list
Time for yet another example of a “flexible boxes with rounded corners” technique. This time I’ve created a flexible news list by styling …
CSS teaser box revisited
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 …
CSS Teaser Box
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…
Equal height boxes with CSS, part II
Since Internet Explorer doesn’t support the display:table, display:table-row and display:table-cell properties, it obviously messes up the…
Equal height boxes with CSS
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…
A List Apart #167
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…
CSS Selectors explained
If you enjoyed Max Design’s Listutorial and Floatutorial, you’ll like the new Selectutorial, which is just as informative. This tutorial e…
The difficulties of learning CSS
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…
More Sliding Doors
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…
CSS Borders
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…
Float it
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
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…
Soft dropshadow
I added another demo page to my Lab section. Soft dropshadow uses background images to create a dropshadow effect. The code is pretty simp…
CSS Frames updated
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 …
Nested Lists Tabs
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…
Listamatic 2
Time for another automatic list generator. Listamatic 2 will generate HTML and CSS for nested lists. Visitors are encouraged to submit the…
Rounding Tab Corners
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…
Image Replacement for IE5/Mac
As noted by Matt Haughey, IE5/Mac has problems with recent image replacement techniques (Image Replacement–No Span and A new image replace…
Floating bugs
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…
More lists
Complementing Listamatic, Listutorial explains, step by step, how to use CSS to style HTML lists.
Lists of 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…
CSS Frames
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…
CSS Tabs
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…
Image replacement techniques
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…
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…
More dropshadows
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…
Dropshadows
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,…
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…
CSS 3 Selectors
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…
CSS Rollovers
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…
Hierarchy
Having just implemented a JavaScript-hierarchical dynamic menu I really wish Internet Explorer would catch up to the level of CSS support …
CSS3
The W3C recently published four CSS3 Candidate Recommendations: CSS3 Text Module, CSS3 Color Module, CSS3 Ruby Module and CSS TV Profile 1…
Zen Garden
The CSS Zen Garden is a showcase intended to let graphic artists apply their own designs to the same, properly structured, HTML file simpl…
Lower class style
Read this and realize why littering your code with <div class="blahblah"><span class="bleh"> adds unnecessary bloat and comple…