Posts Tagged ‘cross-browser’
November 10th, 2010
Data URIs are one of the best techniques in CSS, allowing developers to avoid referencing external images and instead embed them directly into a stylesheet. The main advantage of this approach is to save HTTP requests.
HTTP requests are a huge performance bottleneck, and the reason techniques such as CSS image sprites have been popular for some time. Basically, if you can avoid requesting an extra file, not only does it save your server the work of looking up the file, but it also saves your user the download time. In fact, HTTP request management is so important, that it is the top issue in the Yahoo Performance Rules.
Data URIs are an excellent way to reduce HTTP requests and speed up your pages, so let’s walk through how to use them in all major browsers.
Tags: cross-browser, CSS, data URIs, front-end, HTTP requests, performance
Posted in CSS | 21 Comments
August 17th, 2010
With IE9 in development and Opera 10.5 released, CSS3 is a few steps away from being supported by all modern browsers. But users may take a while to upgrade, and responsible developers will support legacy browsers for years to come.
For some, cross-browser development means making websites that look exactly the same in all browsers. But if developers continue to cater websites to inadequate browsers such as IE6, then they’re just holding back modern browsers from performing to their potential.
Graceful degradation is not about allowing websites to look bad in older browsers, but about making them look great in modern ones. It means taking advantage of CSS3’s useful features to progressively enhance web pages for the vast majority of users.
Tags: browser hacks, cross-browser, CSS, css3, front-end, graceful degradation, IE, jQuery, web design, webdev
Posted in CSS | 14 Comments
July 29th, 2010
Yesterday’s CSS Summit featured some the best CSS minds presenting on cutting edge CSS issues. There was a ton of great information presented across the 8 sessions, but here’s a wrap up of the single best piece of information from each presenter:
Denise Jacobs – Advanced CSS Troubleshooting
The highlight of Denise’s talk was some specific coding tips about clearing floated content.
She started with the standard overflow: hidden method, which falls short with support for borders & margins and also doesn’t allow scrollbars if they’re needed. Denise suggested instead using overflow: auto; width: 100%; which avoids these issues. You don’t have to use the exact values above, you just have to set some type of overflow and width / height value.
Denise went on to discuss a .clearfix:after method, see the gist.
Denise likes this clearing method since it doesn’t include any extra, non-semantic markup (as … Read more…
Tags: best practices, conferences, cross-browser, CSS, css3, front-end, html5, web design, webdev
Posted in CSS | 1 Comment
March 30th, 2010
I’ve always been a fan of drawing page components with pure CSS rather than using image support. Although rendering the page with CSS can sometimes be a pain, the rewards of fewer HTTP requests & less download time make it well worthwhile.
Until recently, most web designers and developers couldn’t design using CSS alone, because there simply wasn’t enough cross-browser support for all the wonderful CSS3 attributes.
However, with IE9 just around the corner and Opera 10.5 already released, we are extremely close to the point where we can render web pages in CSS3 across all modern browsers (IE, Firefox, Chrome, Safari, Opera). Legacy browsers won’t get left out, since our CSS3 pages can degrade gracefully to square corners, flat-color backgrounds, etc. Additionally, we can use browser-specific stylesheets that include plain old image support for key design elements that shouldn’t degrade.
CSS3 makes drawing elements with CSS a … Read more…
Tags: best practices, cross-browser, CSS, css3, rendering, UI, web design, webdev
Posted in CSS | 14 Comments
February 4th, 2010
In the past two years, increased browser support has transformed CSS3 from a fringe activity for Safari geeks to a viable option for enterprise level websites.
While cross-browser support is often too weak for CSS3 to hold up a site’s main design, front-end developers commonly look to CSS3 solutions for progressive enhancement in their sites. For instance, a developer might add a drop-shadow in Firefox, Safari and Chrome using -moz-box-shadow and -webkit-box-shadow, and then be comfortable with this design enhancement falling off for IE users.
But wouldn’t it be great if IE users could see the better version of the page? Fortunately there are cross-browser hacks for the more common CSS3 attributes. These hacks not only allow CSS3 attributes to work in all browsers, but in turn allow designers and developers to use CSS3 in the central styling of their sites.
In this article we’ll walk through getting rounded … Read more…
Tags: cross-browser, CSS, CSS hacks, css3, IE, Opera, rounded corners, SVG, vector
Posted in CSS | 211 Comments
December 22nd, 2009
In Javascript it often makes sense to attach a stylesheet rather than style a bunch of individual attributes. Appending a stylesheet to the DOM has a number of advantages:
-
Stylesheets can be easier to work with than Javascript—it’s just more natural to use CSS syntax for styling.
-
It’s nice to avoid the cross-browser headaches associated with Javascript styling. Compare CSS’s simple float: left to Javascript’s style.styleFloat = ‘left’ and style.cssFloat = ‘left’.
-
Appending a stylesheet is better for performance when styling 15 or more elements.
-
CSS allows you to leverage pseudo-classes and define styles with the simple a:hover selector instead of both onmouseover and onmouseout event listeners.
There are a couple ways to append a stylesheet. Although it’s usually best to attach an external stylesheet, there are times when you need to build a stylesheet on the fly with Javascript. Let’s walk through the code we’ll need to append … Read more…
Tags: append, best practices, cross-browser, CSS, DOM, front-end, javascript, on-the-fly, unobtrusive, web standards, webdev
Posted in front-end | 7 Comments
December 8th, 2009
TranslateThis is a new Javascript widget that provides 52 languages of translation by leveraging the Google Language API.
Installing TranslateThis couldn’t be easier—simply copy and paste the widget code anywhere on your website, you don’t have to upload any files or change any settings.
Besides being easy to use, TranslateThis also provides many attractive features for developers. First off, requests to the Language API run in Javascript, so the translation is pretty fast. Additionally, the script is lightweight, weighing in at just over 11kb with another 7kb of imagery. And since it doesn’t depend on any Javascript library, TranslateThis can be implemented on any website without additional overhead. Finally, TranslateThis has been tested in all modern browsers and its user interface is designed to be straightforward and seamless.
What can you customize in TranslateThis?
Tags: AJAX, analytics, cross-browser, customization, downloads, front-end, javascript, performance, plugins, translation, web design, webdev, widgets
Posted in front-end, webdev | 3 Comments
August 12th, 2009
My favorite thing about web development is the wide variety of skills it uses. Being a good developer means staying on your toes and always learning, because there are so many important skills and these are constantly changing.
Here’s a checklist of 10 skills that are some of the most important for good web developers to have. These focus a bit on front-end skills, but they apply to all developers:
(more…)
Tags: apache, back-end, best practices, checklists, cross-browser, cyber law, debugging, education, front-end, image processing, javascript, optimization, regex, SEO, version control, web standards, webdev
Posted in webdev | 18 Comments
March 24th, 2009
It’s time for developers to stop complaining about web typography. Custom font embedding has been around for years, and it has finally gotten to the point that typography nerds can be equally happy with the fonts on a website as they are with the Photoshop comps. Many of the things that were a total pain to support previously have become a piece of cake. Leading, kerning, and all the major typography buzzwords have been handled for some time. Even drop shadows and Photoshop-style font rasterization options such as ‘strong’ and ‘crisp’ are now fully supportable.
So let’s make sure that we don’t become dinosaur developers, and get up on these modern methods of custom font embedding.
In this article we'll cover all types of font embedding, from older image replacement methods to embedding fonts with Flash, as well as native browser methods and even full Javascript … Read more…
Tags: best practices, cross-browser, CSS, flash, front-end, ImageMagick, javascript, licensing, typography, w3c, web design, web history, webdev
Posted in front-end | 29 Comments
August 18th, 2008
When I was seven, my all-time favorite video game was T&C Surf Designs for the 8-bit Nintendo® (NES). Feeling nostalgic this weekend, I developed a version of this old school game using jQuery and Javascript.
Up and Down to move, Left and Right to skate faster or slower, Spacebar to jump
After playing Javascript Mario Kart, I’ve been wanting to develop a classic video game with jQuery. T&C seemed like a good fit because its motion and overall simplicity are ideal for jQuery’s animation library (and it’s really fun).
I’m fairly pleased with the performance, which is vastly improved through the use of cell-based collision detection. Instead of having to check for collision every pixel, it can be checked every 32, with huge processing savings. Additionally, the use of CSS sprites greatly reduces the number of HTTP requests and the need to use … Read more…
Tags: cross-browser, CSS, javascript, jQuery, old school, performance, unobtrusive, video games
Posted in webdev | 23 Comments
