Archive for the 'css and html' Category

I have been experimenting with the :first-letter pseudo-element to try and write up a tutorial on using first-letter, adjacent selectors and @font-face to produce drop caps and I have run into a problem in the form of Firefox. Because you need to apply the property float: left to stop first-letter being an inline element and Firefox applies different rules to floated :first-letter pseudo-element than the other browsers, making it difficult to vertically align a floated :first-letter pseudo-element and the the remaining text.

There are a number of people demonstrating what is possible is possible with CSS3, here are a few of the better ones I have found.

My wish list of browsers I would like not to support in 2009. One might surprise you and top of my list is not IE6

A little experiment with a two popular windows fonts and a number of different browsers, and one painful result

aka thoughts on what everybody else is doing

I have just finished reading The State of the Web survey results. I was surprised by the results of the survey of current web practices, I always considered myself an early adopter of design and development practices and technologies when it comes to HTML, CSS and the ilk. With an early adopter audience, I expected to be in the middle of the pack of the survey with my design and development practices.

Yeah in a comment to my recent @font-face post suggested that you should place the conditional comments last because how IE6 does not handle the !important keyword correctly.

I will stick with my original decision of placing conditional comments first, because while IE7 and below do not handle the !important keyword as per the W3C specifications, they do apply !important consistently.

I adore the printed page and those little refinements such as Initial Caps, that use to only be possible in print. Here is an explanation of the first-letter pseudo element which allows you to replicate that using HTML and CSS.

My first experiment / tutorial in the progressive enhancement series is with the @font-face property, so enjoy and please do not litter the web with ugly sites that over use fancy type, moderation please.

I have start experimenting with CSS2 and CSS3 properties to see what I can use now for progressive enhancement. And by progressive enhancement I do not mean Hey we are so f…ing cool and if you are not cool enough to use the latest bleeding edge browser you can go and read our RSS feed. It is more great your are using a good browser, lets make your experience better by providing a design closer to what I would of liked to use if it was not for the limitations of other browsers.

John Allsopp has just had published Shiny Happy Buttons on 24 Ways, and John has out shinyed my buttons using CSS3 for progressive enhancement at Web Mixed Grill.