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. This obviously required that javascript be enabled, which I don't consider to be a serious shortcoming, but the solution didn't work particularly well. One serious shortcoming was that, in IE, the footer was not perfectly still while the main content was scrolled but flickered up and down.

The design had to work across both Gecko- and IE-based browsers. Highlights of the solution Producing a fixed footer Sensible browsers The following shows the minimum markup and CSS required for sensible browsers (Firefox and IE7): See an example. First attempt for Internet Explorer 6 Problem fixing Cross-browser implementation. 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. Home » About webinos webinos is an EU funded project aiming to deliver a platform for web applications across mobile, PC, home media (TV) and in-car devices. The webinos project has over twenty partners from across Europe spanning academic institutions, industry research firms, software firms, handset manufacturers and automotive manufacturers. webinos is a “Service Platform” project under the EU FP7 ICT Programme with a budget of 14 m€ including 10 m€ of EU funding.

A foundation is planned to continue the work after the end of the project in August 2013, building upon an affiliates program launched in August 2011 that seeks to attract additional organizations to help with work on specifications and platform development. is a “Service Platform” project under the EU FP7 ICT Programme (click for more info) . For more information on you can download the project fact-sheet in pdf format by clicking here . </b>*} (Secure Web Operating System Application Delivery Environment) Dr. 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. 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.