Optimizing Page Load Time However, for many sites that reference dozens of external objects, the majority of the page load time is spent in separate HTTP requests for images, javascript, and stylesheets. AJAX probably could help, but speeding up or eliminating these separate HTTP requests might help more, yet there isn't a common body of knowledge about how to do so. While working on optimizing page load times for a high-profile AJAX application, I had a chance to investigate how much I could reduce latency due to external objects. Specifically, I looked into how the HTTP client implementation in common browsers and characteristics of common Internet connections affect page load time for pages with many small objects. I found a few things to be interesting: IE, Firefox, and Safari ship with HTTP pipelining disabled by default; Opera is the only browser I know of that enables it. Interesting things to note: Interesting things from that graph: Measuring the effective bandwidth of your users <html><head><title>...
Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs inShare33 The best strategy for dealing with Internet Explorer 6 is not to support it. Stop. Ok, I feel your frustration. You're a web developer and you're ready to tear your hair out because you have to support Internet Explorer 6, but, to put it tactfully, IE6 doesn't support you. This isn't one of those rants about IE6 or a campaign to try to kill it. I've scoured the web for resources and also included some of my own fixes for IE6 and now I've put it all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6. This massive IE6 guide took a while to put together, so bookmark it, share it, tweet it, and use it to save yourself and your coworkers hours of screaming at your monitor and banging your head against your desk or other inanimate objects. Update: Yann Faurie has graciously provided a French translation of this article. Table Of Contents Strategies Contents | Top IE6 Market Share Plan Your Design and Keep It Simple A Simple Reset
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial Commercial License Purchase | Read full license Extended Commercial License Purchase | Read full license
Safari Web Content Guide: Configuring Web Applications A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms. For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in “Specifying a Webpage Icon for Web Clip.” You can also minimize the Safari on iOS user interface, as described in “Changing the Status Bar Appearance” and “Hiding Safari User Interface Components,” when your web application is launched from the Home screen. Read “Viewport Settings for Web Applications” for how to set the viewport for web applications on iOS. Specifying a Webpage Icon for Web Clip apple-touch-icon-76x76.pngapple-touch-icon.png Specifying a Startup Image
Internet Explorer box model is not a bug We often blame Microsoft and the team behind Internet Explorer for its lack of support (or misinterpretation) for standard CSS properties. However, there is at least one property that Microsoft interpreted correctly in my opinion and it’s the box model. Here’s a picture of the W3C box model compared to IE’s box model. This “misinterpretation” of the box model is considered to be a bug in IE. What’s wrong with W3C? Imagine you specify the width, padding and border of a particular DIV. With the standard box model (W3C): you have to reduce the width by 2 or 4 pixels (double the value because of each side) With IE’s box model: you don’t have to do anything, the DIV stays where you positioned it This will happen if you change the padding or the width of the borders. Why did W3C go with this model then? If it’s so bad then why did someone think it was a good idea? It may look alright in text, but practically it just doesn’t work. How can we use IE’s model?
CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. This principle is based on the fact that page refreshes are disruptive to the user’s mental flow, causing what is known as “change blindness”, and that we need to be able to avoid breaking the visual flow of the user wherever and whenever we can. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. Technique #1: Absolutely positioned element
Picment.com » Articles » CSS » Fun with forms – customized input By Søren Madsen Ever wanted to match the look of your HTML forms with the rest of your website? This article demonstrates how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility. A few considerations before we begin Before you throw yourself at this, there are some important considerations you have be aware of. Usability Users trust their credit card and personal information with forms on the internet, and that trust is sacred. Differences in user agents The techniques we're about to demonstrate are not generic . Most popular browsers have however provided us with options to do so, but not all of them. So what are we left with? Logical restrictions With this technique, we basically hide the given form element, and replace it with graphic backgrounds. Some form basics – the and elements The fieldset element functions as a structural container for different sections within a form element. Personal information input fields here ... Yes No “Sure!
Definitive Guide to Taming the IE6 Beast For years, Internet Explorer 6 (IE6) has been the bane of existence for web designers around the world. Designers and users alike have come to enjoy the increasingly predictable, standards-compliant behavior of great modern browsers like Firefox, Opera, and Safari. Meanwhile, IE6 continues to haunt our designs, lurking in dark places while dying a painfully slow, agonizing death. So come now, let us celebrate these last days of IE6 with this definitive guide to taming the IE6 beast. In this comprehensive article, you’ll learn some of the best methods for supporting IE6, including proper targeting, specific hacks, image support, box models, floats, and everything in between. Use conditional comments to target IE6 Conditional comments play an important role in getting IE6 to behave. <! This is an extremely useful method of delivering code and content only to IE6. Of course, conditional comments can do much more than target IE6. Target and filter IE6 with “in-CSS” hacks max-width min-width
CSS3 Filters: Altering HTML and Images with just CSS CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work. Using just CSS we can accomplish some pretty complicated effects. These should be applicable to both images and HTML elements, but obviously browsers will vary for the foreseeable future. The property used to control all of this stuff is filter. filter: filter(value); As you might expect though, browser prefixes will be required. -webkit-filter: filter(value);-moz-filter: filter(value);-o-filter: filter(value);-ms-filter: filter(value); There are quite a few filter, so to get a better idea lets take a look at them individually. filter: blur(5px) brightness(0.5); There are a few filters that I won’t outline below, but these can be easily accomplished with already existing CSS (opacity and drop shadows). Blur Ever wanted to do a gaussian blur on an image or text with just CSS? Sepia
What HTML/CSS would you use to create a text input with a backgr The IE box model and Doctype modes There are two things you should be aware of when developing CSS styled lists IE and the box model IE versions and Doctype modes IE and the box model Love it or hate it, Internet Explore for Windows is the main browser on the web at present. This means that at some point you will have to deal with IE's incorrect interpretation of the box model. In simple terms this means that some versions of IE render the box model to a different width than other Standards browsers. The diagram below shows that if a content box is set to 200px wide with 20px of padding and a 20px wide border, the correct method of calculating the overall box width is: content (200px) + padding (20px+20px) + borders (20px+20px) = 280px. However, some versions of IE calculate the width as: content, padding and borders together = 200px. The solutions are to work around the problem using nested divs or use one of many box model hacks. IE versions and Doctype modes So, which IE browsers use the correct doctype and which do not?
Animating CSS Shapes with CSS Animations & Transitions Notes About Current Browser Support for CSS Shapes: The Shapes properties are still in flux at this time. Most of this article's demos use the shape-inside property, which will be temporarily removed from Webkit and Blink. The principles of animating shapes is applicable to both CSS Shapes and CSS Clipping masks. All the demos in this article use clipping masks to visualize CSS Shapes. Hence, the shapes are animated as clipping paths as well. So, you will be able to see the shapes animate in webkit-based browsers at this time, but the content inside the shapes won't be affected by the shapes because of the current state of support for CSS Shapes. Today we're going to be talking about animating CSS shapes with CSS animations. This is the third article in a series of articles I'm writing about CSS shapes, so in this article I'm assuming you have a basic understanding of how CSS shapes are created. Animatable CSS Shapes Shapes defined using an image are not animatable. 1. 2.
13 Ways to Browser Test and Validate Your Work - Nettuts+ Every day, when reviewing templates on ThemeForest, I test the submissions for validation and browser compatibility - not to mention my own work as well. Over time, I've scrounged the web for the best validation and browser compatibility testing tools around. Here's my favorites. HTML and CSS Validation First let's take a look at some methods to check HTML and CSS validation. Along with validating your files, you should format your markup nicely as well. 1. Probably most commonly known is the online W3C Validation Service. 2. W3C also has a CSS validation service that you're most likely familiar with. 3. The Web Developer toolbar extension for Firefox is very popular and has tons of great features along with some great tools to check HTML and CSS validation. You can also turn on "Display Page Validation" to show some quick validation information for HTML and CSS without needing to open a new tab. 4. 5. Most development editors offer some sort of validation tool. 6. 7. 8. 9 & 10. 11. 12.
How do you deal with Internet Explorer