background preloader

Browser Compatability

Facebook Twitter

Browser CSS hacks. I don’t use CSS hacks anymore.

Browser CSS hacks

Instead I use IE’s conditional comments to apply classes to the body tag. Nonetheless, I wanted to document every browser-specific css selector and style attribute hack I’ve seen. Plus there’s no way to provide stylesheets to only Safari, I believe. With these you’ll be able to better target IE, Firefox, Chrome, Safari and Opera from within the css. So here are go: Comprehensive List of Browser-Specific CSS Hacks If you’d like to take a gander by yourself: Test page with all these hacks present. View the test page at (Thx to Webdevout, Evotech, and Jeffrey, porneL, and commenters.) I should point out I’m not including weird hacks like the voice-family ones or anything particularly ugly. Somewhat related… Here are the most concise browser sniffs I’ve seen.

Update 2009.06.03 - I added the suggestions left on Ajaxian and in the comments and updated the browser versions to consider Safari 4, IE 8, and Chrome 2. Update 2010.01.24 - Added prop: value! App Library. A Guide on Layout Types in Web Design. One of the most variable aspects of web design is the way in which we approach width and height in terms of measurements and flexibility.

A Guide on Layout Types in Web Design

For many years, we have rotated between the benefits and pitfalls of using fixed, elastic, and liquid measurements in a quest to give optimal viewing experiences in highly varied situations, while balancing our need to control things in our web pages. But, as Bob Dylan proclaimed a long time ago, "The times, they are a-changin’," and with these changes come a variety of new ways for laying out your website’s pages and an even more variable landscape of methods for viewing websites. In this article, we will examine web layout types — old, new, and the future.

We will explore the subject in the context that websites are being viewed in a diverse amount of ways, such as through mobile phones, netbooks, and touchscreen personal devices like the iPad. About Your Options. Fixed-position footers. This page describes a solution to the problem of creating a page with a fixed-position footer that is always displayed, while the rest of the content is free to scroll if required (depending upon the size of the browser window and the content).

Fixed-position footers

See a working example Constraints A previous solution had used javascript to remedy the problem of fixed positioning and fixed backgrounds in IE. Mobile Website Redirection. The viewport metatag (Mobile web part 1) The skinny Use this: Introduction This series of posts is intended to introduce web developers to basic techniques for designing for the mobile web.

The viewport metatag (Mobile web part 1)

It assumes at least a basic knowledge of creating desktop websites. The problem Ok, so you’ve settled down to learn how to write a website for a mobile device using your current knowledge of building desktop websites. <! Chrome Frame - Google Code. Webinos Device Agnostic Platform. Webinos can be applied to many industries and applications.

Webinos Device Agnostic Platform

We have focused initially on four specific areas or gateways: TV, Automotive, Health and Home Automation Gateways. Each gateway consists of complete end to end specification of reference hardware, core platform and example applications. Click on the individual gateways below for more information. A core concept of webinos is interaction across several broad domains: automotive, home automation, health, media – by connecting these areas individual devices can offer users much more powerful options. webinos is a “Service Platform” project under the EU FP7 ICT Programme (click for more info).

For more information on webinos you can download the project fact-sheet in pdf format by clicking here. Overview Project title: webinos (Secure Web Operating System Application Delivery Environment) Project coordinator: Dr. Duration: 09/2010 – 08/2013 Total cost: 14 Mio € ViewPorts. Page last changed today Related files: Last major update on 12 November 2013.


Here’s the inevitable compatibility table that goes with my viewport research. It treats the viewports themselves as well as some related items. position: fixed was moved to the CSS test pages. See A tale of two viewports for a further explanation of these terms. CSS pixels. Handset Detection. All the handy info, in one spot Welcome to the resources pages.

Handset Detection

This is the place we gather all the handy tips on how to use handset detection into one convenient location. There's 3 options for detecting devices with Handset Detection. Express, Cloud and Ultimate. Express is the most popular option, and is perfect for redirecting mobile visitors to a mobile website. Pro Tip : When setting up a site with Express make sure to tick Smart Redirection. Cloud puts you in the drivers seat. Ultimate is designed for high volume sites. The main features page has a comparison of the detection options. Help & Support Ask a question on our Forums, OR click the Help Box on the right hand side of any page to get started. Please include your website URL, mobile site URL and Handset Detection account email address, along with a description of the problem in all support messages.