Frederik Van Zande's Library tagged css →  View Popular

"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."

www.smashingmagazine.com/...in-internet-explorer-6-7-and-8 - Preview

css IE IE7 IE8 IE6 bugs

CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font.

But doing either of those things means you’re missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site’s typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

www.smashingmagazine.com/...plete-guide-to-css-font-stacks - Preview

css font stack overview typography webdesign

www.popandshorty.bigcartel.com/...buttons-magnets - Preview

css html gadget must-have

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

We’ve put together this guide to save you the time and frustration of figuring it out for yourself. With 23 different email clients tested, we cover all the popular applications across desktop, web and mobile email.

As the number of email clients continues to grow, we’ve decided to simplify the web-based version of the guide to focus on the 10 most popular email clients on the market. For the complete report on all 24 email clients across the desktop, web and mobile email world, download the complete guide in PDF format.

www.campaignmonitor.com/css - Preview

e-mail css htmlm guide best practice webdesign support reference

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!).

www.smashingmagazine.com/...ss-everything-you-need-to-know - Preview

css webdesign backgrounds

CSS is one of the most powerful tools that is available to web designers (if not the most powerful). With it we can completely transform the look of a website in just a couple of minutes, and without even having to touch the markup. But despite the fact that we are all well aware of its usefulness, CSS selectors are still not used to their full potential and we sometimes have the tendency to litter our HTML with excessive and unnecessary classes and ids, divs and spans.

www.smashingmagazine.com/...taming-advanced-css-selectors - Preview

css selectors advanced

Elements of Design is a different type of web design showcase focusing on specific aspects of web design. It is brought to you by the Smiley Cat Web Design Blog.

www.smileycat.com/design_elements - Preview

inspiration webdesign design css patterns usability design patterns resource

David Siegel
Every so often, dredging through the muck and mire of hopeless self-promotion and autodidacticism saturating the World Wide Web, one encounters an exotic specimen: the Web Head who truly merits it. David Siegel is not merely a self-proclaimed "HTML Terrorist," he has been so anointed by knowledgeable and right-thinking SGML/XML purists everywhere.

www.xml.com/...s1.people.html - Preview

spacer.gif table html css inventor

Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.

www.smashingmagazine.com/...smart-fixes-for-fluid-layouts - Preview

screen resolution javascript css fluid adaptive grid webdesign

The problem has boggled the minds of Web designers for years: fixed, fluid, elastic or a hybrid layout design? Each option has its benefits and disadvantages. But the final decision depends so much on usability that it is not one to be made lightly. So, with all the confusion, is there a right decision? By considering a few factors and properly setting up the final design, you can end up with a successful layout design that reaps all the benefits.

www.smashingmagazine.com/...ut-whats-the-right-one-for-you - Preview

css design fixed fluid elastic layout

css-tricks.com/...PerfectFluidWidthLayout - Preview

css fluid example template

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

a.deveria.com/caniuse - Preview

browser compatibility css canvas html test implementation

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library. The idea for building these templates was inspired by Andy Clarke, author of Transcending CSS, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the grey box method.

designinfluences.com/fluid960gs - Preview

css grid 960 grid fluid best practice template

Waaaaah! Waaaaaah! You hear that? That’s IE6 whining about how you should be using an obtuse “filter” attribute, causing all those nice, pretty pngs on your page to go whacky. Fortunately for you, we got just the thing to shut it up. Give it just the tiniest dose of our Unit PNG Fix and bask in the the glorious phosphoresence of your png images once again! While this is not the only png fix out there (in fact, it was inspired by Drew McLellan’s supersleight), here’s why it will be the last one you need to download:

labs.unitinteractive.com/unitpngfix.php - Preview

css ie6 png pngfix hack

I have written previously on the fine art of preloading images without JavaScript using only CSS. These caching techniques have evolved in terms of effectiveness and accuracy, but may be improved further to allow for greater cross-browser functionality. In this post, I share a “CSS-only” preloading method that works better under a broader set of conditions.

perishablepress.com/...css-image-caching - Preview

css caching preload images best practice

The WebKit team has been developing some cutting-edge proposals to extend CSS with the ability to do declarative animations and other effects. This ability is key to maintaining the three-fold separation of HTML content, CSS presentation, and JavaScript behavior. Animation effects on the Web today are accomplished with JavaScript code which repeatedly changes an element's style at a certain interval in order to create an animated effect. This practice, however, violates the separation between presentation and behavior because the animation behaviors are directly changing the document's presentation (i.e. modifying the style property). Ideally, all of the animation triggers and presentation states would be declared in CSS. And this is exactly what the WebKit team has proposed in its CSS Transitions specification.

weston.ruter.net/...jquery-css-transitions - Preview

jquery javascript animation css css transitions webkit

My friend/ex-coworker Sam the Wonder Boy used to send me late night AIM messages comprised of only three letters, “M.F.R.” This would then send chills up my spine, and I’d curl up on the floor in fetal position and weep nonstop.

OK, I’m exaggerating a quite bit, and Sam doesn’t do that anymore.

“M.F.R.” stands for “Monthly Forecast Report.” It was one of the many modules of a huge intranet web application we worked on years ago. As the name implies, it was a report. Before arriving to the actual report screen, the user could select some criteria such as date range, products, etc. Depending on the selection, the report can have up to sixty columns and thousands of rows. It was quite a challenge both on the backend and frontend. I initially created it using server side Excel API and dumped it to the frontend as an excel sheet. In version 2 I made it as an HTML table with the Excel export option. In version 3 I ditched HTML and went for Crystal Report, in version 3.5 it became Active Report. In version 4 we rewrote the whole application as a .NET client app, with the report section being Excel again. In version 5, well there wasn’t a version 5. The whole project got outsourced to India and the team was disbanded. But that’s a blog for another day.

www.8164.org/the-big-table-issue - Preview

css table big size best practice

Over the last few months, I’ve spent more time than I intended on exploring the whole idea of fonts and typography for the Web. (My friend, typography expert Simon Pascal Klein, writes, “The former is a stylized set of glyphs of characters,” while “the other [is] the whole art of creating type and setting it into the written word.” For more clarification and illumination, consult Jon Tan and Mark Simonson.)

In the process, I’ve been considering the idea of font stacks—using the well-known font-family CSS property—to list as many different fonts as possible in order to optimize the web site experience for a maximum number of users.

www.sitepoint.com/...eight-definitive-font-stacks - Preview

css fonts typography font stack cross browser cross OS

Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling.

The Opera browser runs on handheld devices of all screen sizes and resolutions, some of them only 120 pixels wide. We work for the company that produces Opera, so we can offer a degree of insight into the functions of Opera for handhelds. In this article, we’ve prepared a set of general suggestions for creating a handheld-friendly style sheet, along with a few Opera-specific pointers that you may find useful.

www.alistapart.com/...pocket - Preview

mobile devices mobile screensize mobile web css best practice

The past couple of years have seen numerous new web-capable mobile devices arise, including Apple’s iPhone and its Safari browser, the creation of Google’s Android platform and Webkit-based browser, the rise of so called “full web” browsers (Nokia’s S60, Opera Mobile and Opera Mini, among others), the early development of Firefox’s mobile version, and more. These mobile browsers improve users’ experiences, giving them access to websites formerly off-limits to most mobile devices. Indeed, as a 2008 Nielsen Media Research report highlighted, mobile devices have increased traffic by an average of 13% across several popular websites.

www.alistapart.com/...returnofthemobilestylesheet - Preview

mobile devices mobile web css stylesheets best practice