Take it with the usual grain of salt that should accompany any news of global browser trends, but, extrapolating out from the 2011 trend in StatCounter’s Global Stats Chrome appears set to surpass IE as the most-used desktop browser some time next summer. And that will finally end the 13 year domination of the market by Internet Explorer. Though, I’m a little sad that Chrome’s market share is also coming at the expense of Firefox. … Read the rest here
I’ve been following the announcements of the new Windows 8 UI (and particularly ‘Metro’) this week with great interest. I think they’ve done a fantastic job with Metro, it really looks like a fresh start UI wise. One detail stood out in particular. In the screenshots I noticed that they’ve adopted the Open Share Icon in their UI. To fill you in, the Open Share Icon came about after the original share icon was purchased by the company that provides the ShareThis service. While still licensed for public use, some people felt this wasn’t in the spirit of the thing, and decided to create a completely open version instead . … Read the rest here
Safari Omnibar is a SIMBL plugin for Safari that enables a single addressfield/search bar like Google Chrome’s Omnibox. Its still fairly early days, but it works well, and has just been updated to support search shortcuts: (the search bar is hidden after installation) To edit keyword searches, right click the address field… … and then you can then enter the search keywords This is of course functionality that’s been available in Opera and Firefox, long before Chrome, but this is a great way for folks that prefer Safari to get it. Safari Omnibar is hosted on github Tagged: plugins , safari … Read the rest here
One method that I’ve been using quite a bit for positioning elements is setting them absolute and using left, right, top and bottom values to lock inner elements relative to an outer container. I like using this technique because padding will not cause any positioning issues like using width can—especially when widths need to be percentage-based. textarea { position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; } I tried positioning a textarea using this technique and everything looked fine in Webkit but the moment I went to check it in other browsers, I was surprised to find it wasn’t respecting the right and bottom values. Yes, the element was absolutely positioned. And yes, the left and top values were working fine. … Read the rest here
For years now, we’ve used a number of techniques for hiding content offscreen for accessibility purposes. We do this because the content is still accessible to screenreaders while being removed from the interface for sighted users. An article over at Adaptive Themes reviews a number of techniques for hiding content that were considered for inclusion on a Drupal 7 project (but certainly applicable to any project). Here is a summary of those techniques and the pitfalls of each technique: Text Indent .element-invisible { text-indent: -9999em; outline: 0; } Unfortunately, this technique doesn’t work with RTL (Right-to-Left) languages. Position Absolute and Collapsed .element-invisible { height: 0; overflow: hidden; position: absolute; } In this case, Apple’s Voice Over will not read content within an element that has zero height. Position Absolute and Offscreen .element-invisible { position: absolute; top: -999999em; left: auto; width: 1px; height: 1px; overflow:hidden; } In this case, if you have focusable content within the positioned element, the page will scroll to that element, thus creating an unsettling jump for sighted users. … Read the rest here
As web developers, we want a way to ask “can you do this?” And there are varying degrees to which we can determine this. One of those ways is to use user agent (UA) detection. We ask the browser some information about itself and it tells us. Based on what we know about a browser, we can make certain assumptions. If a browser tells you it is Internet Explorer, chances are you support the HTML, CSS and JavaScript that Internet Explorer supports. This detection could happen on the server-side or client-side… Read the rest here
As I dig into the nooks and crannies of the various CSS3 modules, I’ve come across something that seems like I should be able to do, but I can’t make it work in browsers. Now, I know as well as anyone that if you try to do something and browsers won’t do it, it might well be the fault of the browsers. Particularly if you can get various browsers to fail differently on the same declaration, as I have. But this is, bizarrely, complicated enough that it’s hard to be sure if it’s me or them. So allow me to pose this to you as a challenge. Given the following ideal rendering, how would you arrive at the depicted result using the single 5-pixel-by-5-pixel image shown within the content? … Read the rest here
Let’s face it, testing multiple browsers on multiple systems isn’t very practical. But it’s still a fact of life for the web developer. What I’m about to show you is how I manage testing in multiple browser versions. About three years ago, I used to do all of my development on a Windows laptop. I had an old Mac G3 tower, an Ubuntu server, and a Windows 2000 server… Read the rest here
I ran into this rather odd rendering in Firefox 3.6. I had a fieldset with content following it that was nested inside a list item. <ul> <li><fieldset> … </fieldset> <p>Additional information.</p> <li> </ul> The odd behaviour became quickly evident when my list bullet would not line up next to the fieldset, as expected. Instead, it lined up with the content that appeared immediately after the fieldset. I haven’t found an easy fix for this except to remove the fieldset entirely. … Read the rest here
CSS3 Flexible Box Module : This morning is the first I
On a seemingly regular basis, I see this discussion come up as to whether CSS should have a particular feature like the parent selector and while I haven’t worked on a browser engine, I have my theories. In short: performance . How CSS gets evaluated With work, I’ve had to do quite a bit of examination of performance. We run a number of tools over an application to determine where the bottlenecks are. … Read the rest here
At the prompting of an inquiry from a respected software vendor, I asked The Twitters for pointers to “canonical” lists of vendor-prefixed properties, values, and selectors. Here’s what the crowd sourced at me: Microsoft
Browser UI for Photoshop : How handy is this? Create a browser window around any size document, existing or new, with this Photoshop action by Ben Shoults. Just $3 gets you individual actions for Chrome, Safari, and Firefox. And generously, Ben is donating all proceeds to the Authentic Jobs charity: water campaign for the next 5 days. … Read the rest here
Firefox Home for iPhone : Mozilla has submitted its first app to the App Store, and it
In Chrome 5, Safari 4, Opera 10.53 and sometimes Firefox (although I was unable to reproduce it in this test case), changing the visibility of the element by toggling display:none will cause the scroll offset to reset to zero. Toggling visibility:hidden does not seem to trigger the same problem. Scroll the container and then toggle the classes applied. Class applied: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. … Read the rest here
Firefox 4 to Add CSS3 calc() : Paul Rouget, Mozilla: This feature hasn
Prefetch Content with HTML5 : This sounds too easy. Add a line like this to your head element: or
Have you heard of Hundred Pushups ? It’s a simple six-week program to build up your strength by slowly increasing the number of pushups you can complete. By the end of six weeks, you should be able to complete 100 and along the way you’ve gotten a short workout working multiple muscle groups. Since I’m still trying to lose weight , I figured I’d get started on the program (yesterday was my first day and managed to do 12 pushups at the end of my first set). However, being the geek that I am, I thought, "I should track my progress with a cool iPhone app." There is one available for $1.99 from the Hundred Pushups web site. … Read the rest here
HTML forms have been, to date, quite simplistic. We’ve had limited options: the text field, the checkbox, the radio button, the textarea and finally the select drop down. Any complex data like phone numbers, email addresses or dates had to be checked by JavaScript. (And you should always and I mean always do server-side validation of the data.) The input element works overtime by being rendered completely differently based on the type it’s given—be that a text field, password, checkbox, radio button, and others. Considering my readership, this is all terribly old and boring to you now. I understand… Read the rest here
ColosseoType.com, An All-HTML5 Endeavor : The site for the Colosseo poster is my first production-ready website with HTML5 under the hood. I
