Pestbarn

As we all perfectly know, designers are narcissists.

Archive for the tag “css3”

Revamp project: Font sizes in mobile Safari

Today I found this odd little bugger in mobile Safari. I was writing the mobile-specific CSS sheet for the website I’m revamping, and it was all going smooth until I stumbled upon this annoying little <p> tag. The problem? I had specified the font size and properties for this little paragraph tag earlier in my document, which looked like this:

#my-short-paragraph { 
	font: bold italic 16px Georgia, serif; 
	text-align: left; 
	color: #3a8ede; 
	cursor: pointer; 
	margin: 25px 0 30px 10px; 
	-webkit-transition: color 0.2s ease-in; 
	-moz-transition: color 0.2s ease-in; 
	-o-transition: color 0.2s ease-in; 
	transition: color 0.2s ease-in; 
}

Nothing tricky going on here, right? A bold, italic Georgia font at 16px, with a blue color. Simple as that. But when I wrote the following CSS to make the layout for mobile browsers, I noticed that the font size did not change at all in mobile Safari. Not in iOS 4.0.2, not in iOS 4.1, nor in iOS 4.2.

@media screen and (max-device-width: 480px) {
	#my-short-paragraph { 
		font: bold italic 10px Georgia, serif !important;
	}
}

I’m getting very used to adding !important rules while writing for mobile, since you kind of have to override the ”normal” style rules, but this didn’t matter. I tried lots of different variations, like font-size: 10px !important;, font: 10px Georgia, serif !important; and font-size: small;, but neither worked. It didn’t even work when I tried it this way:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	#my-short-paragraph { 
		font: bold italic 10px Georgia, serif !important;
		font-size: 10px !important;
	}
}

At last, I was starting to get a bit frustrated, and cursed this paragraph’s font size sorcery. Then I thought, ”Let’s try declaring it with two different methods, then maybe Safari will take the hint and make the font smaller!”, and this is what I finally came up with:

@media screen and (max-device-width: 480px) {
	#my-short-paragraph { 
		font: bold italic 10px Georgia, serif;
		font-size: small;
	}
}

It worked! It baffled me, but it worked! I didn’t need the !important rule any longer, but I had to declare the font size twice with two different methods – one time with px and one time with small. If I removed either declaration it wouldn’t work, regardless of any !important rules.

This problem might be very specific, but it was weird enough for me wanting to post it. I don’t know why this problem occurred, but here’s the solution either way.

HTML 5 Cheat Sheet

Jag hittade precis ett alldeles utmärkt cheat sheet för HTML5. Första kommentaren på bilden på Flickr lyder ”Seems kinda counterproductive to post it as an image”, då fick jag idén att göra ett eget cheat sheet fast i HTML5 istället för i en bild. Frågan är bara hur jag ska finna tid till det.

Via Flickr:
HTML 5 Visual Cheat Sheet is a useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

Post Navigation

%d bloggare gillar detta: