background preloader

A pixel is not a pixel is not a pixel

A pixel is not a pixel is not a pixel
Page last changed today Yesterday John Gruber wrote about the upped pixel density in the upcoming iPhone (960x640 instead of 480x320), and why Apple did this. He also wondered what the consequences for web developers would be. Now I happen to be deeply engaged in cross-browser research of widths and heights on mobile phones, and can state with reasonable certainty that in 99% of the cases these changes will not impact web developers at all. The remaining 1% could be much more tricky, but I expect Apple to cater to this problem by inserting an intermediate layer of pixels. One caveat before we start: because they’re unimportant to web developers I have mostly ignored the formal screen sizes, and I’m not really into disucssing the ins and outs of displays, pixel densities, and other complicated concepts. I do know what web developers are interested in, however. It’s easiest to explain when we consider zooming. The following two images illustrate what happens when the user zooms. Stay tuned.

CSS3 Media Queries Test on your browser Style Master CSS Editor for Windows and Mac OS X Cool Tools and Toys for Web Developers John, the lead developer (ok, pretty much the only developer) of Style Master is an avowed hacker. He loves exploring and experimenting with the latest features in browsers. Here's a collection of tools for web developers he's put together to help you analyse and debug your sites (and other people's sites as well), play with CSS3 features (bleeding edge browsers recommended) and more. XRAY works in Safari, Firefox and Internet Explorer. It helps you visualize the layout of your page. XRAY uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas. MRI helps you create the best possible selectors for your CSS. MRI also uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas. CSS3 Sandbox Gradients Explore CSS gradients (both linear and radial) (an experimental feature in Safari 4, and a proposed addition to CSS3). Shadows CSS Transforms Coming soon

Don’t use IDs in CSS selectors? ❧ Oli.jp (@boblet) Recently I came across the post by Matt Wilcox called CSS Lint is harmful, ranting about the useful free tool CSS Lint. The “Don’t use IDs in selectors” suggestion seems to have offended Matt the most, but I was surprised that many commenters also mentioned this as being a reason to avoid CSS Lint. This surprised me because smart people have been saying prefer classes to IDs for a while now. The article was light on reasons why this suggestion might be bad, but it boils down to: Performance — IDs are “the fastest way a browser can select a given element”If they’re already in the markup it’s best to use them for CSSI’ve been using IDs like forever… waddya mean I shouldn’t use them!? Performance # It’s a common belief that ID selectors are the fastest, but this comes with a big caveat: IDs are fastest CSS selector only if they’re the key selector. #home a {…} We’d generally read this selector as find the element with id="home", then apply these styles to every a it contains. Conclusion #

html - Vertically align an image inside a div with responsive height Very Simple CSS-only Proportional Resizing of Elements | Well Caffeinated A while ago I posted about Proportional Resizing of Web Page Elements Using Only CSS. At the time, it seemed like the only solution… but fortunately a slightly counter intuitive CSS standard provides a much better way to get this same effect. Credit goes to Nathan D. The concept is nicely discussed in Matt Snider’s Blog Post Doing a little research, I was reminded that when you use percents to apply the margin of an element, the browsers determine the actual size of the margin by multiply the percent against the width of the parent node (this is true for margin-top, -right, -bottom, and -left). This could come in handy for a few things. For example, if I have a container with a child element like so: I can use the following css to give the child element an aspect ratio of 4:3 But, of course, if we put any content inside the child it will change the height and throw off our aspect ratio. <div class="container"><div class="outer"><div class="inner">Your content</div></div></div> and css

Demo: Adaptive Design With Media Queries Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vimeo Video YouTube CSS2 - The display declaration Page last changed today The display property lets you define how a certain HTML element should be displayed. display: block display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance). Live example: display: inline display: inline means that the element is displayed inline, inside the current block on the same line. display: block display: inline display: none display: none means that the element is not displayed at all (so you won't see it in the example either). display: none display: inline-block An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block. display: block Let's add some content to see how the block behaves. display: inline-block; width: 10emLet's add some content to see how the block behaves. display: list-item

Le positionnement inline-block Les manipulations que demande le positionnement flottant se révèlent parfois un peu délicates sur des sites complexes. Dès qu'il y a un peu plus qu'un simple menu à mettre en page, on risque d'avoir à recourir à des clear: both; qui complexifient rapidement le code de la page. Si le positionnement flottant reste, de loin, le mode de positionnement le plus utilisé sur le Web à l'heure actuelle, d'autres techniques existent et bien peu de webmasters le savent. L'une d'elles, étonnamment puissante, est passée sous le nez des concepteurs de sites web alors qu'elle existe depuis CSS 2.1, c'est-à-dire depuis plus de dix ans ! Elle consiste à transformer vos éléments en inline-block avec la propriété display. Quelques petits rappels sur les éléments de type inline-block : Ils se positionnent les uns à côté des autres (exactement ce qu'on veut pour placer notre menu et le corps de notre page !). 1nav 3 display: inline-block; 4 width: 150px; 5 border: 1px solid black; 8section 10 display: inline-block;

How to deal with :hover on touch screen devices Are you planning a web project? Not sure what mobile strategy is right for you? Read our short educational article that can help you make the right choice. This article is a small case study about dealing with hover effects on touch screens. As you know, :hover behavior doesn’t exist on touch screen devices. While coding prowebdesign.ro we ran into double tap behavior twice: with pure CSS main menu drop-downs, and with portfolio sorting filter drop-downs (see Filter 1 and Filter 2 on this page). Problem was eliminated completely on all devices with screen width less or equal to 768 px. But what about touch screen devices with larger resolutions, like tablets? First of all, you need to decide what variant of layout you will want for those devices. To recap: at resolutions larger than 768px both main menu and portfolio filters on my site have drop-downs which are displayed on :hover. With filter drop-downs this sticky behavior was especially annoying. I’ve put together a starter template.

iOS has a :hover problem Posted at July 5, 2012 01:33 pm by Nicholas C. Zakas Tags: CSS, Hover, iOS, Mobile Recently, I got my first iPad. I’ve had an iPhone since last year, and had gotten used to viewing the mobile specific view of most websites. :hover exists everywhere One of the things we’ve been told and I’ve repeated over and over again is that touch devices have no concept of hover. Naturally, with a touch device, there really isn’t a lingering pointer. So it goes without saying that most developers expect touch devices to simply ignore CSS rules containing :hover. This is where the people at Apple might have been a bit too smart. No double taps When I started experiencing the double tap behavior, I was noticing what appeared to be a hover state being shown after the first. My first step was to create a simple example to see if I could reproduce it. When I tried that, the link worked with one tap and I saw the color change briefly before navigating. Double tap! Possible workarounds if (! Conclusion References

CSS Differences in Internet Explorer 6, 7 and 8 Advertisement One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Thanks to the many available JavaScript libraries, JavaScript testing across different browsers has become as close to perfect as the current situation will allow. This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8. This article does not discuss: Child Selectors Example

Related: