CSS Archives - Page 2 of 3

Heart

As a tribute to Eric Meyer’s daughter Rebecca, the named colour rebeccapurple has been accepted into the CSS spec. Rebecca passed away on her sixth birthday recently.

Relative Unit Based Media Queries

Based on the standard browser font-size of 16px, the following media query to have an affect on screens 160 pixels wide and up.

@media only screen and ( min-width : 10em ) {
  html {
    background-color: #ddd;
  }
}

Now, I would expect adding the following code would cause the media query above to have an affect on screens 320 pixels wide and up.

html {
  font-size: 2em;
}

Specificity, SMACSS and WordPress

At the June WordPress Melbourne Meetup, I spoke about CSS Specificity, SMACSS and WordPress. I had a great time, the video and slides are below.

Faux Columns Revistited

It’s time to update Dan Cederholm’s faux columns to take advantage of CSS3 gradients and reduce http requests.

I’ve put a demo on Github where you can also see the source code.

The Developer’s Guide To Conflict-Free JavaScript And CSS In WordPress

Imagine you’re playing the latest hash-tag game on Twitter when you see this friendly tweet:

You might want to check your #WP site. It includes two copies of jQuery. Nothing’s broken, but loading time will be slower.

Continue reading at Smashing Magazine.

How we do IE Hacks

We recently changed the way we do IE hacks at Soupgiant. For years we used conditional comments to load separate CSS files.

For a few sites, we used Paul Irish’s conditional HTML classes hacks. Without workarounds, this puts IE in compatibility mode.

Maintaining Link Focus

Anyone who has attempted to navigate a web page using the keyboard, will have experienced sites that remove the default a:focus style without adding in a replacement.

The cause – but not the fault – lays with Eric Meyer’s original CSS reset, subsequently included in the YUI CSS framework, among others.

Minimum Page, A CSS Base

We decided to release Soupgiant‘s CSS base to the world at large. You can find it at minimumpage.com.

Minimum Page comes from a frustration with CSS resets and bases. Ripping down the styling only to rebuild many of the same styles is unnecessary, especially for defaults common to all browsers.

To encourage people to consider the code they insert in their site, the styles aren’t provided in a minimised form. Developers should edit the original base to make generic, site wide changes.

It’s exactly what we use to start all of our CSS at Soupgiant. We think it’s important to share.

The !important declaration has really bad reputation, and deservedly so. As is often the way, this reputation results from abuse rather an inherent problem with the property itself. An example of its abuse might be:

#nav {
  float: none !important;
  /* where did I float this? */
}
/* ...jumble of code... */
ul#nav {
    float: left;
}

There are, however, instances where the !important declaration is the best tool for the job.

Selectivizr with CSS on a sub-domain

Updating a WordPress starter theme recently (among other things I was porting it to HTML5), I needed to decide which shims and/or polyfills to use. I starterd with Remy Sharp’s HTML5 enabling script but another to consider was Selectivizr to improve IE‘s support of CSS3 selectors.

One of the disadvantages of using Selectivizr is it rules out using a CDN for one’s style sheets. To quote their site:

Style sheets MUST be hosted on the same domain as the page due to browser security restrictions. Likewise, style sheets loaded using the file: protocol will not work.

After umming and ahhing for a couple of days, the following solution involving conditional comments, occurred to me:

<!--[if gte IE 9]><!-->
<link rel="stylesheet" href="http://cdn.example.com/styles.css" type="text/css">
<!--<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" href="/styles.css" type="text/css">
<![endif]-->

With a few lines of conditional comments, browsers supporting the relevant selectors natively can take advantage of the performance boost from a CDN while developers can take advantage of the advanced selector support provided by Selectivizr for IE<9 users.

I’ve set up a quick demonstration in which three paragraphs have different ARIA roles – featured, unfeatured and neverfeatured – different styles are applied to each paragraph using [role=something]. The demo renders fully in: IE 6-9beta, Firefox (Win & Mac), Chrome (Mac), Safari (Mac), and Opera (Mac).

Tag: CSS