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.
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.
Explanations of why some of the bad practices that are made fun of at the Enterprise CSS/HTML/JS sites are bad practices.
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.
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.
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.
How to prevent your website from having unreadably small text when it is first loaded in Safari on iOS and how to prevent auto-scaling of text when you change orientation from portrait to landscape on your iPhone/iPod/iPad
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.
A tutorial that explains how to use the CSS float property to create layouts with three or more columns.
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.
A set of sites making fun of worst practice front-end code commonly found on enterprise type sites and in large content management systems.
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.
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.
Page navigationPage 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 21
Subscribe / follow
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost