Tag: CSS

Posted on

ChatGPT does NOT recommend using Mac IE 5.5

My mind was completely blanking on the methods/terms we used “back in the day” to target Mac IE 5.5 with CSS overrides and I even struck out on DuckDuckGo so I asked ChatGPT 4. In addition to giving me the answer I was looking for and code examples, it also first spent several paragraphs first telling me how ancient that browser and what a terrible idea it was to even try to support it.

And then closing with reiterating AGAIN how “strongly it recommended not targeting such an old browser” and told me to convince users to upgrade to Chrome, Safari, or Firefox. ?

Posted on

background-size property overwritten by background shorthand by Firefox

As I start to use new CSS3 properties more often new issues are arising that I didn’t have to deal with before. Building out a new responsive site now that is using retina images for the mobile site so I’m using the background-size property extensively. I ran into a bug in Firefox 11 where in some situations the property was ignored.

Here’s an example of the code that did not work in Firefox:

112
113
114
115
116
117
118
119
120
121
122
123
124
125

.author:after {
	background-size: 30px 30px;
	content: "";
	height: 30px;
	padding: 0;
	position: absolute;
	right: -32px;
	top: 0;
	width: 30px;
}
 
.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
}

Turns out, using the background shorthand was overwriting the size. Adding the background-size property to the more specific author declaration fixed the issue.

It looks like this is actually correct behavior according to the spec. Using the shorthand overwrites all other background properties. From the Standarista site’s notes on CSS3 background properties:

If you use the background shorthand and fail to declare any of the individual properties that make up the shorthand, those properties will revert to their default values […].

I thought it was time to learn the more detailed background shorthand that includes the new properties like background-size and background-clip. However, the W3C’s spec for it isn’t actually supported by seemingly any browsers yet. Here’s what the new shorthand declaration of the code should be:

123
124
125

.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top / 30px 30px no-repeat;
}

Unfortunately, that valid line of CSS breaks in every browser I tried it on and results in the image not displaying at all. I ended up needing to define the background-size property separately after the shorthand declaration:

123
124
125
126

.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
	background-size: 30px 30px;
}

The actual code will vary depending on what you’re doing but the important thing is to not forget to include the other background properties even if you’re not specifying them in your shorthand.

Posted on

Using Modern Techniques for Great Web Typography

Great typography use is one of the most important factors in creating beautiful design. Unfortunately, at the same time web typography has been the most limiting and frustrating technology in web design and development for some time. Not too long ago, nearly every creative brief or brand conversation with clients would include the topic of which fonts we could use on their website. The answer would always lead to the depressing answer of choosing between Arial, Verdana, or a half dozen other typically supported fonts. Modern browsers and modern techniques are finally changing that.

There have been many different font replacement techniques over the years but each has had critical limitations that made them only practical for certain uses with certain designs. Image replacement using CSS looks and works great and is great for SEO but it could only be used sparingly because it requires creation of a new image and CSS changes to implement. sIFR was an ingenious workaround using Flash to replace text on the fly with beautifully rendered text, but alas it had many performance and occasional display issues and was difficult to maintain as new browser updates were released.

So, are we just stuck with Georgia headings until the end of time? Thankfully, no…

CSS3 and @font-face to the Rescue.

There are finally new tools at our disposal (and more importantly browsers that actually support them) that are helping create a more beautiful web. Newly supported CSS3 properties and some clever web services give us the ability to easily and securely embed thousands of different fonts that we were never able to use before. And using the @font-face rule these fonts are treated no differently* by the browser from the websafe fonts we’ve been using for so long.

Check out this example using CSS (rendered in your browser):

The quick brown fox jumps over the lazy dog.

As you can see from the example, there is a lot of power in using regular HTML text and CSS for the typography. And almost all of it works in every modern browser. The cool Lobster font is embedded from Google and then just like any other text we’re able add a link with a hover effect, a CSS3 text-shadow, and a dotted underline with a tooltip to define the word. And of course it’s as easy to change as any other text on the website using a CMS.

Continue reading “Using Modern Techniques for Great Web Typography”