Browser CSS hacks. I don’t use CSS hacks anymore. 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 browsershots.org (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. 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 Let’s set our objectives for this exploration of layout types: Absolute Layouts Fixed Layout. 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).
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. The design had to work across both Gecko- and IE-based browsers. Highlights of the solution Fixed position footer Footer obscures main content behind it Background image which obscures content under the footer, but is behind the content otherwise Footer does not flicker while scrolling Works across Gecko (Firefox), IE6 and IE7 No javascript Markup validates as XHTML 1.0 Strict Only a few ugly CSS hacks Producing a fixed footer Sensible browsers See an example. Mobile Website Redirection | Mobile Browser Detection | Handset Detection. The viewport metatag (Mobile web part 1) | David B. Calhoun – Developer Blog. The skinny Use this: Introduction This series of posts is intended to introduce web developers to basic techniques for designing for the mobile web.
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. <! Ok! <p class=”wp-caption-text”> Hello World on the iPhone </p></div> Doh! This is the first lesson in making mobile websites: width is your enemy. If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. Viewport But this is no good! Now we tweak our Hello World just a bit… <! And we get this… <div id=”attachment_203” style=”width: 320px” class=”wp-caption aligncenter”> <p class=”wp-caption-text”> Hello World with the Viewport tag </p></div> Much better!
More fun with the viewport tag References. Chrome Frame - Google Code. Webinos Device Agnostic Platform. Webinos can be applied to many industries and applications. 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 € Programme: FP7-ICT-2009-5 – Objective 1.2 webinos in a Nutshell 1. 2. 3. 4. 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 Expand and contract with zooming; it’s this pixels that are taken as measurement grid for all CSS declarations. Device pixels Formal number of pixels on device. Device pixel ratio The ratio of physical pixel count and ideal viewport. Layout viewport The initial area of the HTML element. Visual viewport The actual screen viewport through which you look at the layout viewport. Ideal viewport The one you get when using width=device-width. This table looks into the properties that are necessary to read out useful information about the three viewports and the two types of pixels.
Test page. iOS 6 WebKit 536 Default browser on iPhone 4S with iOS 6.1.3 iOS 7 Presto. Resources | Handset Detection. All the handy info, in one spot Welcome to the resources pages. 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. There's no server scripts or complicated setup. 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.