Your browser is not supported.

This website is optimized to work in modern browsers like Safari 3+, Firefox 4+, Chrome 10+ and IE9+. If you are using a different browser, you may experience visual glitches or other problems.

Posts tagged with talking shop

24 Sep 2011

Check it, yo.

So you may have noticed the new template. What you may not know is that the changes are more than skin-deep: I’ve rewritten the template from the ground up to take advantage of all the latest CSS3/HTML5 bells and whistles, including my new favorite thing, Compass.

The site is now responsive: you should be able to look at it on everything from an iPhone to a desktop and the layout should gracefully change to accommodate the screen size (if you notice any wrinkles, please do let me know).

Finally, the site design makes use of a series of best practices that my colleagues and I have been compiling over the years, which has culminated in an open source project we call our CSS3 Foundation.

Take a look and let me know what you think!

21 Aug 2009

Strange but true

So I came across (and reported) a rather strange bug in Safari 4 for Windows today. If you’ve styled a select box with a border color, and your windows’ and buttons’ appearance are set to Windows Classic style in Windows XP, the down arrow on the select box disappears. No lie. Try it yourself:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en"
      lang="en">
<head>
  <!-- meta tags -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <style type="text/css">
    select.with-border
    {
      border-color: black;
    }
  </style>

  <!-- external javascript links -->
  <!-- libraries -->
  <script type="text/javascript"
          src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  </script>

  <script type="text/javascript">
    (function($) {
      $(document).ready(function() {
        $(".user-agent").text(navigator.userAgent);
      });
    })(jQuery);
  </script>

  <title>Home</title>
</head>
<body>

  <p><strong>User agent string:</strong> <span class="user-agent">blah</span></p>

  <p>
    <select>
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </p>

  <p>
    <select class="with-border">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </p>

</body>
</html>

In Windows XP appearance mode, you’ll see:

windows_xp_mode.png

And in Windows Classic appearance mode, you’ll see:

windows_classic_mode.png

Very, very strange. Apple must be drawing the form inputs pixel by pixel or something.

14 Jun 2009

The future of markup: XHTML 2 vs. HTML 5

The current standards we use for markup, XHTML 1 and HTML 4, are both getting rather long in the tooth—they’re 9 and 12 years old, respectively. In that time, the web has changed almost unrecognizably. With the aid of dynamic scripting and technologies like AJAX, we do things in browsers today that the founders of the web, and the creators of these markup specifications, could only imagine.

So it only makes sense that the standards should evolve to meet the needs of today’s (and tomorrow’s) web. Now, there are people already hard at work on the next versions of both the HTML and XHTML specifications, and there are two possible directions we could go with markup.

You can read about the similarities and differences in the two new specs in detail elsewhere, but in brief, it seems that while HTML 5 can be seen as an evolution of today’s markup, XHTML 2 is more of a reimagining.

While both specifications have some promising features, HTML 5 has more industry support (most browser vendors) and is further along in the approval process. Each also has its own faults—for instance, I don’t really see why HTML 5 chose to create predefined classnames, since for one it’s exceedingly unlikely that browser vendors will implement default user agent stylesheets to capitalize on them.

In general, I am leaning more towards XHTML 2. Here’s why:

  • While both standards support XML namespaces, XML serialization and doctype switching, HTML 5 is as lenient as HTML 4 was towards poorly formed markup.

    Which in a nutshell is why I’m not a fan—you may be able to validate poorly-formed markup, but why on earth would you want to write markup that way? It’s harder to read and much much harder to debug.

  • XHTML 2 seems to have implemented certain similar features more intelligently than its counterpart. For example, both specifications introduce the concept of a nav list, but only in XHTML 2 is it actually considered a list, with child li elements, which is more semantic than introducing a nav list where the items don’t have to be list items.

XHTML 2′s big (and perhaps fatal) flaw is that it’s coming from a closed group. HTML 5′s working group, however, is open and transparent. They at least realize that standards development that will impact the whole web should also allow people from every walk of internet life to be involved.

There are hopes that we’ll see a passed standard by sometime next year; let’s hope that the final product is something we can all benefit from.

10 Dec 2008

Brilliant!

So I was just trying to figure out how to center an image inside a div with hidden overflow when the image is larger than the div, and it turns out it’s not as easy as you think. Vertical alignment is easy using vertical-align: middle. However, giving the div container text-align: center, for example, doesn’t work—the image’s left edge still aligns with the left edge of the div. After a little Googling, I found this rather ingenious solution.

<style type="text/css">
  .centre
  {
    position: relative;
    margin: 100px auto;
    width: 200px;
    height: 150px;
    overflow: hidden; /* the centered bigger image's overflow is clipped at all four sides */
    background:#cfc;
  }

  .centre span
  {
    position: absolute; /* makes block-box wrapped around its content */
    top: 50%; /* absolute %-unit referes to the selector's first positioned ancestor */
    left: 50%; /* places the selector's top left corner in the centre of the container div */
  }

  .centre img
  {
    position: relative; /* does not move the original object, positions the image of it */
    top: -50%; /* relative %-unit referes to the selector itself */
    left: -50%; /* places the centre of itself in its original top left corner position */
  }
</style>

<div class="centre">
  <span><img src="image.jpg" alt=""/></span>
</div>

Follow the link to see the code snippet in its entirety, but in short what you do is that you wrap the image inside a span that is absolutely positioned at top: 50% and left: 50%, so that its top left corner is placed in the exact center of its parent, the div with the overflow. Then you relatively position the image so that its top and left are both -50%, et voilà, you have a centered image! Brilliant!

11 Oct 2008

Linky goodness

Lots of good stuff at SimpleBits in the last week; just keep scrolling. Some things of note:

  • The WebKit development team recently redesigned the web inspector with a ton of useful improvements. Do not miss this!
  • Ork Posters – Typographic city neigborhood posters. Both Chicago and San Francisco are available. Super terrific!
  • Scroll is a new magazine on web design—available in both print and electronic format—brought to you by Web Directions. I haven’t had a chance to dig deep into this yet, but I am expecting great things.
  • The folks at SimpleBits have put together a custom Amazon store wherein they recommend books, music, etc. that they use to design. What a great resource!

Finally, A List Apart turns 10 this year; read Jeffrey Zeldman’s retrospective.

Older entries >