David B. Calhoun - Developer Blog » css

Thursday links (July 8)

David — Fri, 09 Jul 2010 04:00:09 +0000

Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5)

David — Wed, 30 Jun 2010 03:27:11 +0000

Mobile-specific HTML

Use the viewport tag to properly fit the content to the screen:

Use the tel scheme for telephone numbers, allowing users to initiate calls by clicking:

Call us at 1-800-555-5555

Or use the sms scheme to initiate an SMS message:

You also have access to several Apple-specific tags to use in your web application (iPhone and iPod Touch):

// iOS 1.1.3+: this is the icon that's used when the user adds your app to the home screen


// iOS 3+: full-screen startup splash screen image


// enable full-screen mode


// controls the appearance of the status bar in full-screen mode

And also some handy attributes to turn off annoying autocorrect features (works on iPhone, but anything else?):

Mobile-specific CSS

Media queries enable you to target specific features (screen width, orientation, resolution) within CSS itself. You can use them two ways: 1) inline in a CSS stylesheet or 2) as the “media” attribute in the link tag, which targets an external stylesheet. The following is an example of inline CSS that’s applied only when the device is in portrait mode:

@media all and (orientation: portrait) {
	body { }
	div { }
}

Here’s the same media query using the other method, which points to an external stylesheet (not recommended, as it creates another network request):

Here’s a few examples:

// target mobile devices
@media only screen and (max-device-width: 480px) {
	body { max-width: 100%; }
}

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	// CSS goes here
}

// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
@media only screen and (min-resolution: 300dpi) {
	// CSS goes here
}

(edit: removed section on body[orient='portrait'], which requires JavaScript and is in error. See Part 6: Dealing with device orientation for more details.)

Mobile-specific JavaScript

window.devicePixelRatio: determine screen resolution (analogue to the media query). (iPhone 4 has the value 2, while Nexus One has the value 1.5).

window.navigator.onLine (boolean): not strictly mobile, but helpful for apps to determine if they’re being run offline

window.navigator.standalone (boolean, iOS 2.1+): determine if it’s running in full-screen mode (Apple only?)

touch events (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel

gesture events (Apple only, iOS 2+): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)

window.orientation and orientationchange event: triggered every 90 degrees of rotation (portrait and landscape modes)

MozOrientation (Fennec/Firefox Mobile, Firefox 3.5+): also not strictly mobile. Gives access to the device’s accelerometer (x-y-z orientation data), updated periodically. Works on Android phones (I tested on the Nexus One), Windows Mobile, etc. On the desktop this works with laptops such as Thinkpads and MacBooks.

-near future: camera/microphone access in Android 2.3 (announced at Google I/O 2010) through the Capture API

If you’re developing for a BlackBerry Widget, you have access to proprietary information through the blackberry object (which gives access to useful information such as blackberry.network [returns values such as CDMA and Wi-Fi] and blackberry.system).

You also have the option to use PhoneGap, which augments JavaScript and gives you access to more phone features that native apps would have access to.

Use a mobile-optimized JavaScript library

Because smartphone browsers are standards-based, the aim of a JavaScript library on mobile is less towards API normalization and more towards providing an actual UI framework, usually to emulate the feel of native apps (and to provide easier workarounds to lack of access to position:fixed). We’ve seen a few libraries released that emulate the iPhone UI, and in the future we might see libraries emulating the Android UI, as well as entirely new UIs.

There’s also a bit to be said about simply loading full desktop JavaScript libraries into mobile clients. In my opinion this doesn’t particularly make sense, especially in a world where latency and bandwidth are so much more of a concern. It doesn’t make sense to force the user wait longer and download code that’s ultimately useless to them (hacks for desktop browsers such as IE 6, etc).

Here’s a few of the mobile libraries now available:
-Sencha Touch
-baseJS
-XUI
-jQTouch: jQuery-style mobile library that emulates the look of the iPhone UI
-iUI: the first JavaScript library to be released, emulates the look of the iPhone UI. Originally coded by Joe Hewitt.
-PastryKit: Apple proprietary non-public JavaScript library with no available documentation

Take advantage of new stuff!

While not specific to mobile, there’s a lot of new stuff in general that you can use. If you limit yourself to the top smartphones (iPhone, Android, and maybe webOS), compared to the desktop you immediately have access to an even wider array of new stuff, especially many Webkit proprietary features, since most of these top smartphones have browsers based on Webkit.

-HTML: new tags (HTML5 (I’m sure you’ve heard of it by now…))
-CSS: 2d transforms, 3d transforms, animation, border radius, custom fonts with @font-face, etc.
-JavaScript: strict mode, constants, block scope, Date.now(), etc.

This post is part of a series on the mobile web. You can read the other parts of the series here:
Part 1: The viewport metatag
Part 2: The mobile developer’s toolkit
Part 3: Designing buttons that don’t suck
Part 4: On designing a mobile webpage

A Clockwork Box

David — Tue, 02 Mar 2010 23:22:59 +0000

With CSS there are always various ways to accomplish something. After reading this short tidbit, you should be familiar with the various ways of controlling the size of an element’s padding, border, and margin, and you should know what the handy “clockwork” tip is, and how it will be useful to remember when you’re putting your CSS into practice.

Equal values on all four sides

If all four values (top, right, bottom, and left) are equal, then you simply write the following:

padding: 1px;
border-width: 1px;
margin: 1px;

The longhand way

If you don’t want equal values on all four sides, then you can specify each side individually:

padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

The shortcut (like clockwork)

However this seems to be quite a hassle typing out each property, so you’ll find it’s much easier to use the following shorthand, which is in this order: top, right, bottom, left (think of the hands going clockwise around a clock). The following is equivalent to the above code:

padding: 1px 2px 3px 4px;
border-width: 1px 2px 3px 4px;
margin: 1px 2px 3px 4px;

Other shorthands

This is the style I find myself writing in most often, but there are two other shorthand styles you should be aware of:

padding: 1px 2px 3px;  /* top, left/right, bottom */
padding: 1px 2px;      /* top/bottom, left/right */

Summary

In short, there are various ways to define the padding, border, and margin on an element. Here’s a recap, with padding used as an example:

padding: 1px;              /* 1 value: top/right/bottom/left     */
padding: 1px 2px;          /* 2 values: top/bottom, left/right   */
padding: 1px 2px 3px;      /* 3 values: top, left/right, bottom  */
padding: 1px 2px 3px 4px;  /* 4 values: top, right, bottom, left */

A primer on CSS colors

David — Wed, 30 Dec 2009 05:17:41 +0000

Color keywords

Example usage:

// Example
body { color: red; }

// Generalization (not actual code)
body { color: color_name; }

Because color names are easy to remember, they’re handy for getting quick results, especially while doing rapid prototyping.

W3C’s CSS1 recommendation first mentioned 16 color keywords that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow:

Color	Hexadecimal	Color	Hexadecimal	Color	Hexadecimal	Color	Hexadecimal
aqua / cyan	#00FFFF	gray	#808080	navy	#000080	silver	#C0C0C0
black	#000000	green	#008000	olive	#808000	teal	#008080
blue	#0000FF	lime	#00FF00	purple	#800080	white	#FFFFFF
fuchsia / magenta	#FF00FF	maroon	#800000	red	#FF0000	yellow	#FFFF00

(color table from Wikipedia)

CSS2 officially mapped the colors to recommended hex values and also added the color orange. CSS3 removed orange, presumably because having 17 colors was aesthetically unpleasing in a binary world?

In addition to these 16 “official” colors, there’s even more unofficial color names you can use that appear to be supported in all the major browsers.

RGB values

Example usage:

// Example
body { color: rgb(255,0,0); }

// Generalization (not actual code)
body { color: rgb(red [integer 0-255], green [integer 0-255], blue [integer 0-255]); }

For this section it’s very handy to know a bit about color theory, particularly these facts:

all colors can be made from a combination of red, green, and blue (RGB) as the primary colors
in light (additive color mixing), the absence of all color results in the color black
in light (additive color mixing), the mixing of red, green, and blue in equal amounts results in the color white

With the rgb attribute, we specify the amount of each color we want with an integer from 0 to 255. Here we can see both black and white expressed as rgb values:

Black:
rgb(0,0,0)

White:
rgb(255,255,255)

Also note that if all three values are equal, there is no color that predominates and the result is a shade of gray.

Dark gray:

rgb(30,30,30)

A lighter shade of gray:

rgb(200,200,200)

And of course we can favor only one color, which in this case gives us a full red, with no green or blue:

rgb(255,0,0)

You may have guessed that we can also use percentage values to represent the same color:

rgb(100%, 0%, 0%)

RGBA values

// Example
body { color: rgba(255,0,0,0.5); }

// Generalization (not actual code)
body { color: rgb(red [integer 0-255], green [integer 0-255], blue [integer 0-255], alpha transparency [float 0-1]); }

CSS3 introduced rgba, which is in every way similar to rgb, except for the addition of a fourth value, alpha opacity, which gives us control over the transparency of the color.

So the equivalent full red we have above would look like this (no transparency):

rgba(255, 0, 0, 1)

rgba(100%, 0%, 0%, 1)

And the same color, only now semitransparent:

rgba(255, 0, 0, 0.5)

rgba(100%, 0%, 0%, 0.5)

Hex values

Example usage:

// Example
body { color: #ff0000; }

// Generalization (not actual code)
body { color: #rrggbb; }

Hex values are probably the most common out of all of the ways to represent colors in CSS. But I included them last – what gives? It seems to me that the rgb value should logically be explained first. The hex value is just a hex version (and thus slightly more confusing version) of expressing rgb values.

For this section you ought to know the basics of hexadecimal numbers. In particular, the fact that hexadecimals are base 16 and use letters a-f to represent numbers beyond our conventional base 10 range.

The hex value starts with a hash (#) and is followed by six numbers and/or letters. This is simply our three color values again: red, green, blue, with each color allowed two digits.

We express our solid red color like this:

#ff0000

As long as you can convert between decimal and hexadecimal (there’s a few free tools online), it’s relatively easy to convert between rgb and hex color values. Just keep in mind that the first 16 hex values are preceded by a zero (0 becomes 00, 1 becomes 01, 10 becomes 0a, 11 becomes 0b, etc.)

Shorthand hex

Example usage:

// Example
body { color: #f00; }

// Generalization (not actual code)
body { color: #rgb; }

Last but not least, if each rgb value has a repeating value, you can simply omit the repeating value. In the case above each of our color values was repeating (red = ff, green = 00, blue = 00), so we simply drop the repeating digit from each color and cut three bytes from our code:

#f00

A note on web-safe colors

Web safe colors were a recommended subset of about 256 colors with which to design websites. The rationale for solely using them for web design was for rendering consistency, so even users with very limited displays could see the page as it was intended to be displayed.

The concept of a “web safe” color was becoming obsolete even in 1997 or so, when I started making my personal website on AOL. It’s safe to say that the vast majority of users today are now able to view webpages with at least 16 million colors (256*256*256).

But this doesn’t mean we shouldn’t be concerned about colors. Apart from pure aesthetics, in the area of accessibility it’s often mentioned that users with colorblindness find certain combinations of colors difficult to see. So keep this in the back of your head when you go crazy with those wild color schemes!

More info

Probably the best way to learn how to use these color values is to actually try them on your website, however you might also find the following links useful.

Color Scheme Designer is a nice tool for finding several colors that (theoretically) should go well together. It’s a nice place to go when building a website from the ground-up.

http://colorschemedesigner.com/

Jonathan Schlaepfer made a nice helper tool built in Mootols for creating webkit gradients. Gradients wasn’t the subject of this entry, but it’s helpful to see a nice visualization of rgb values corresponding to the hex values.

http://schlaeps.com/mootools/gradient-creator/

Wikipedia: Web colors

HTML Colors

IE Mobile 6.12 problem: browser ignores the specificity of CSS display styles

David — Tue, 01 Sep 2009 04:41:48 +0000

UPDATE: I found that the problem is actually that inline-block is completely unsupported in this version of IE Mobile, and is likely also unsupported in IE Mobile 7, which is also based on IE4. This is in contrast to desktop IE6, where inline-block is supported on elements that are natively inline (span, em, etc.).

Just found this today, for what it’s worth. If you’re unlucky enough to be working with older Windows Mobile phones you have probably realized that the browser is based on IE6, which all the desktop web developers notoriously complain about constantly.

Though the mobile version of IE6 has most of the same issues as its desktop counterpart, IEMobile introduces some new random problems. And in most cases there’s no handy web resources to help you out, since almost everyone develops for the desktop.

This particular IEMobile quirk is a specificity problem. We have a parent element styled with display: block and the child element is styled with display: inline-block or display: inline. We’ve made the child CSS selector more specific so it should override the parent:

.parent { display: block; }
.parent .child { display: inline-block; }

This works on the desktop version of IE6! But not in IEMobile 6.12, where the child element is still displayed as a block. The same thing happens when we change the “.parent .child” style to “display: inline;”, but interestingly not when we change it to “display: none;”, where the style is correctly recognized and applied. Doh!

And FYI: I checked and found that this bug is not occurring on IEMobile 8.12

David B. Calhoun - Developer Blog » css

Thursday links (July 8)

Mobile

JavaScript

CSS

Books

Etc.

Using mobile-specific HTML, CSS, and JavaScript (Mobile web part 5)

Mobile-specific HTML

Mobile-specific CSS

Mobile-specific JavaScript

Use a mobile-optimized JavaScript library

Take advantage of new stuff!

Related posts

A Clockwork Box

Equal values on all four sides

The longhand way

The shortcut (like clockwork)

Other shorthands

Summary

A primer on CSS colors

Color keywords

RGB values

RGBA values

Hex values

Shorthand hex

A note on web-safe colors

More info

IE Mobile 6.12 problem: browser ignores the specificity of CSS display styles