Posts tagged "css"

Yesterday I used three things for the first time: Sass, Compass, and Ruby. To summarize:

• I ♥ Sass
• I ♥ Compass
• I ♥ Ruby

One's own site is a great place to play with new (or in this case, not so new) web technologies. I decided to get stuck in and manually convert the 1200 line style sheet from CSS to something a bit more awesome. This post documents the most interesting portion of that transformation, which involved this site's archives styles.

So, you're about to style an unordered list of some sort…

<h1>TXJS 2011 Speakers</h1>
<ul>
  <li>Brendan Eich</li>
  <li>Alex Russell</li>
  <li>Douglas Crockford</li>
  <li>Paul Irish</li>
</ul>

You've decided upon hanging square bullets in a light grey – nothing too distracting…

ul {
  list-style: square outside;
  color: #ccc;
}
li {
  color: #000;
}

This should do the trick, but doesn't for some reason! How the heck does one target the bullets and only the bullets? As far as I know it's not possible.

Conventional hack

<h1>TXJS 2011 Speakers</h1>
<ul>
  <li><span>Brendan Eich</span></li>
  <li><span>Alex Russell</span></li>
  <li><span>Douglas Crockford</span></li>
  <li><span>Paul Irish</span></li>
</ul>

<style>
  ul {
    list-style: square outside;
    color: #ccc;
  }
  li > span {
    color: #000;
  }
</style>

This gets the job done, but those spans are ugly – there are ways to achieve the desired visual effect without hacking the markup.

Background image technique

ul {
  list-style: none;
}
li {
  margin-left: -12px;
  background: url(bullet.png) no-repeat 0;
  text-indent: 12px;
}

This requires very little CSS. To avoid incurring the overhead of an extra HTTP request, one could Base64-encode the image in a data URI.

Pseudo-element technique

ul {
  list-style: none;
}
li {
  position: relative;
}
li:before {
  position: absolute;
  top: 8px;
  margin: 8px 0 0 -12px;
    /* accommodate Camino */
    vertical-align: middle;
    display: inline-block;
  width: 4px;
  height: 4px;
  background: #ccc;
  content: "";
}

So it's possible to fashion square bullets of any colour with just a handful of straightforward declarations. Nice!

Prefer round bullets? No problem. :)

  ...
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  ...

On the Web it's not uncommon to see characters with no inherent meaning used for stylistic reasons. A good example is the Read more » link. Perhaps the directionality of the "»" is suggestive of travelling to another page, or perhaps the letterform is included solely for its aesthetic appeal. Whatever the case, one thing is certain: links do not require right-pointing double angle quotation marks in order to function.

The inclusion of such a character is therefore a design decision. It is decoration, not content. It belongs in a style sheet, not in a page's markup.

I was delighted to discover this "trick" over on CSS-Tricks in a post titled Textarea Tricks. (See, Chris, I do like you!)

Internet Explorer displays a (completely pointless) inactive scrollbar in empty textarea elements, unlike other browsers which wait until a scrollbar is actually required before displaying it.

As it turns out, there's a dead simple way to prevent this, and once again its everybody's friend overflow to the rescue.

textarea { overflow: auto; }

The overflow property seems to be a magical remedy for a variety of different ailments, most significant of which is the collapsing of an element whose children are all floated. Applying overflow: auto makes the element wrap its children rather than letting them "hang".

One thing that I sometimes ponder, though, is why visible was selected as the default overflow value – it seems inferior to auto in most use cases.

This site's search field has been virtually unusable in Chrome and Safari on Windows for several months. Fixing it was not high on my priority list, but I finally got to it this evening.

Before

I did my best to get these browsers to respect the padding values that I'd assigned in my style sheet, getting aggressive in the Web Inspector. No joy.

I then noticed a curious property, -webkit-box-sizing. Sure enough, this was the culprit. Safari and Chrome both use border-box as the default value, which means that padding does not add to an element's dimensions the way it does in the standard box model.

Specifying content-box fixed the problem.

After

This is an extremely satisfying solution as it neatly targets the source of the problem.

The question remains as to why these browsers default to border-box as the box-sizing for input elements with type="search". I don't know whether default styles are specified at the rendering engine level or at the browser level, but either way I would say that it's the result of Apple fiddling with the controls to make search inputs look sexy on Mac OS X (where they're rendered very differently).

One way to reduce the number of HTTP requests a page requires is to group (non-content) images into sprites. An even better way is to remove these images from the server altogether; instead include them as encoded strings in your style sheet.

Chris Coyier has done it again. Compelled me to stay up all night, that is (it's 7am as I type this). In Chris's latest screencast, CSS Image Switcher, he demonstrates how to create an "image switcher" using CSS. The problem, though, is that his process is wrong.

Incorrect process

1. What effect or experience do I want to create?
2. How can I achieve this using CSS (and JavaScript if necessary)?
3. What can my markup do to help me?

Correct process

1. What effect or experience do I want to create?
2. What is the most correct and meaningful way to describe the content?
3. How can I achieve the desired effect or experience (or something close to it) without altering my markup?

Modern browsers can display exciting visual effects such as drop shadows (without the use of background images). CSS3 makes it possible to turn submit inputs and even links into rich, Aqua-like buttons in these browsers (alternative style rules can be provided for older browsers).

I began this post three months ago, got stuck, and put it in the too hard basket. I wanted to devise a workable solution to my stumbling block before publishing this information. I'm getting ahead of myself, though. First, the background.

As I began writing this post, I had just completed a redesign of this site. The new design removed unnecessary distractions to allow readers to focus on the clearly presented content. I moved site navigation from the sidebar (which I axed altogether) to the header. I decided to fix the header in place so that the navigation and search form would always be visible. This required very little effort, but overcoming the problem posed by fixed-position headers took a great deal of trial and error. To save others from going through this tortuous process I'll describe my various approaches, and list the benefits and drawbacks of each.

Sticky footers should be ubiquitous. They are not.

This leads me to believe that many developers are unaware of how to prevent footers from floating up on pages without much content.

In my post titled Captions over images I advocate the use of definition lists for captioning images. Earlier today I was asked whether this meaningful markup could be used in conjunction with an "image slider" such as Easy Slider 1.5.

I had a look at the Easy Slider source code and decided to write my own image slider using Prototype rather than hacking someone else's code to pieces. It's a proof of concept rather than a full-blown "plugin", but it demonstrates that such functionality is achievable using elegant, meaningful markup.

Check out the Prototype image slider demo to see the code in action.

There are blog posts all over the Web explaining how to write valid XHTML markup to embed YouTube videos. There are also a number of online converters that generate this markup automatically.

I've always found it easier to write the markup myself, as there's really nothing to it. Simply replace both instances of video_id in the following code with — you guessed it — the video's ID.

<object class="youtube"
        type="application/x-shockwave-flash"
        data="http://www.youtube.com/v/video_id&hl=en&fs=1&rel=0">
    <param name="movie" value="http://www.youtube.com/v/video_id&hl=en&fs=1&rel=0" />
    <param name="allowFullScreen" value="true" />
</object>

rel=0 is often useful to include (as I've done in the example above) as it prevents thumbnails for related videos from being displayed at the end of the clip.

One important point to remember when you're "rolling your own" markup is that the character entity & must be used for all ampersands.

Finally, be aware of the fact that it's possible to change the size of the YouTube object using CSS. There's no need to include the width and height attributes in the markup.

object.youtube
{
    width: 100%;
    height: 385px;
}

This is my response to Chris Coyier's screencast titled jQuery Part 3 – Image Title Plugin which I watched a couple of days ago. Something didn't sit right with me at the time, and I've now worked out what it was: JavaScript is not required!

I'll present a JavaScript-free approach for displaying captions over images that uses truly meaningful markup.

Recently I've been on a mission to minimize the number of HTTP requests made while loading pages on this site. Until yesterday, the archives page was making an HTTP request for each of the tiny calendar icons used on the page. Therefore, up to 31 HTTP requests were required just to retrieve the calendar icons. Not good.

The same result can be achieved with a single HTTP request through the use of a sprite:

Tiny calendar icons sprite, which you're welcome to save and use

It's no secret – I love Coda! It's a pleasure to use. It looks so damn good. When I started using SyntaxHighlighter I set out to create a Coda theme. Thankfully, the good folks at Panic had done the ground work for me. All I had to do was create a style sheet that would make my code snippets look as sexy online as they do in my text editor.

Or so I thought.

Today I noticed that a page on this site failed validation. W3C's markup validation service gave the following error:

element "strike" undefined

<strike> is not valid XHTML; I'd forgotten the correct XHTML markup for this purpose:

my favourite colour is <del>red</del> <ins>white</ins>

The above gives: my favourite colour is red white

It's a good idea to explicitly define the appearance of deleted and inserted text in your style sheet:

del { text-decoration: line-through; }
ins { text-decoration: underline; }

If you've ever worked with CSS, you'll understand how frustrating it is to edit a style sheet and be unable to view the change because a cached version of the file is being used. One line of PHP will fix this problem, and will also ensure that visitors never view your site through the lens of an outdated style sheet.