HTML Presentations with Opera

Because Opera is not an extremely popular browser, most developers probably aren’t aware of one of its greatest features: Opera Show mode. Opera Show mode is the official name of the full screen mode for Opera (technically, it’s only called Opera Show when a projection media style sheet – discussed below – is present); and it brings with it a great possibility.

More than two years ago, Opera added support for the projection media mode in CSS. Whenever the browser is expanded to full screen mode, it activates the projection media, allowing you to apply a completely different stylesheet to the full screen page than you have in other settings.

WordPress: Adding Some Class to Meta Boxes

For WordPress plugin developers, the metabox API generally proves to be invaluable. Meta boxes allow you to organize various bits of information, groups of options and more into nice, attractive, collapsible boxes rather easily. What’s more, these boxes can be dragged around the screen and reorganized without much hassle. However, one thing that you can’t do with meta boxes is to assign additional CSS classes to them.

However, in WordPress 3.2, you will be able to do just that. WordPress 3.2 will introduce a brand new filter that allows you to modify the list of classes that are applied to a meta box. In order to use it, you’ll need to know the slug of the page on which the meta box is being displayed and the ID of the meta box.

CSS: Fluid-Width Dropdown Menus

More than seven years ago, a fantastic article was posted on A List Apart explaining how to create dropdown menus with pure CSS. Up until that point, most (if not all) Web developers and designers were using javascript in some way to make their dropdown and fly-out menus function. The concept, for whatever reason, was referred to as the “Suckerfish menu“.

Shortly after that article was published, someone else came along and published information about the Son of Suckerfish menus. Other concepts based on the Suckerfish menu came along as well. The major issue with all of those articles and examples, though, is that they seem to require fixed-width menus for some reason. If you don’t set your top-level menu items to be a fixed width, by default the dropdown menu items will either wrap onto multiple or will force the top-level item to expand to fit the dropdown menu.

Can We Even Use CSS2, Yet?

With all of this talk lately about CSS3 and how amazing the Web will be once it gains wide browser support, it got me thinking about how well CSS2 is supported. Sadly, there are still a lot of really cool features that were introduced in the CSS2 spec that we can’t use yet, thanks to the overwhelming market share held by Internet Explorer 6 and 7.

In this article, I’ll take a quick look at some under-used CSS2 features and examine whether or not they are supported in IE7.

Use HTML5 Elements in Today’s Browsers

I am taking John Allsopp’s HTML5 Live course offered by SitePoint (a great deal, by the way), right now, and he shared a neat little tip that I wanted to pass on. You can use many of the new HTML5 elements (header, article, section, etc.) right now, even in older browsers like Internet Explorer 7.

All you need to do is add an extra “boolean attribute” to the element, and you can then style them with CSS in almost all of the browsers currently being used.

Cross-Browser Gradient Backgrounds

One of the great new features coming with CSS3 is the ability to use native gradient backgrounds. In addition to saving server resources (no need to call an external image), the gradients tend to be more vibrant and faithful to the original colors than any external images.

So far, none of the modern browsers have agreed on which method to use to implement the gradients, so you will need to utilize a few different methods in order to get it to work in multiple browsers.

Pages: