CSS
Cascading Style Sheets are used to define the presentation layer of websites. How CSS works is not always self-evident, so many of these articles explain various aspects of using CSS.
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.
Conditional sibling class names for IE patching
A different approach to using conditional comments to add class names for targeting CSS at different versions of Internet Explorer.
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.
An alternative to select elements as navigation in narrow viewports
Using a select element for navigation in narrow viewports is not an ideal solution. Here is an alternative technique that uses real links and is fully stylable.
Page navigation
Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | Page 6 | Page 7 | Page 8 | Page 9 | Page 10 | Page 11 | Page 12 | Page 13 | Page 14 | Page 15 | Page 16 | Page 17 | Page 18 | Page 19 | Page 20 | Page 21Subscribe / follow
Sponsors
Authentic Jobs
Job openings from Authentic Jobs
- Experienced PHP / MySQL Developer at eTecc / Interactive (Oak Brook, IL, Il, US)
- Director, Technical Solutions at Cramer (Norwood, MA, Ma, US)
- UI/UX Designer at ProLink Solutions (Denver Tech Center/Englewood, CO, Co, US)
- JavaScript/CSS/HTML5 Developer at CurriculaWorks (Burlingame, CA, Ca, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost