Techniques

TwitterFacebook
Get flash to fully experience Pearltrees
Published by Chris Coyier I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices . Google is also always on a crusade to make the web faster.

Efficiently Rendering CSS

http://css-tricks.com/efficiently-rendering-css/
http://coding.smashingmagazine.com/2010/05/06/modern-css-layouts-part-2-the-essential-techniques/ In Modern CSS Layouts, Part 1: The Essential Characteristics , you learned that modern, CSS-based web sites should be progressively enhanced, adaptive to diverse users, modular, efficient and typographically rich. Now that you know what characterizes a modern CSS web site, how do you build one? Here are dozens of essential techniques and tools to learn and use to achieve the characteristics of today’s most successful CSS-based web pages. Just as in the previous article, we’re not going to be talking about design trends and styles; these styles are always changing. Instead, we’re focusing on the specific techniques that you need to know to create modern CSS-based web pages of any style. For each technique or tool, we’ll indicate which of the five characteristics it helps meet.

Modern CSS Layouts, Part 2: The Essential Techniques - Smashing

Last week I talked about Cross-Browser CSS Gradient . Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. http://webdesignerwall.com/tutorials/css3-gradient-buttons

CSS3 Gradient Buttons

http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

CSS3 Solutions for Internet Explorer - Smashing Magazine

CSS3 is probably the hottest trend in web design right now, allowing developers the opportunity to implement a number of solutions into their projects with some very straightforward CSS while avoiding having to resort to nonsemantic markup, extra images, and complex JavaScript. Unfortunately, it’s not a surprise that Internet Explorer, even in its most recent version, still does not support the majority of the properties and features introduced in CSS3. Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind .
HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible. While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now . http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

Coding A HTML 5 Layout From Scratch - Smashing Magazine

Dec 18 2009 By Tim Wright and TJ Kelly CSS is the best thing to happen to the web since Tim Berners-Lee. http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html

CSS Techniques I Wish I Knew When I Started Designing Websites -

1. position:static The default positioning for all elements is position:static , which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative

Learn CSS Positioning in Ten Steps: position static relative abs

http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.tripwiremagazine.com/2009/06/7-new-essential-css-3-techniques-revealed.html

7 New Essential CSS 3 Techniques Revealed | tripwire magazine

There are several new and exciting functions and features being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc… This article presents 7 New CSS3 techniques that every web designer and developer should be aware of. CSS3 for sure will leads to greater flexibility and make effects that was previously complex and difficult to create much easier. Unfortunately it is not currently all the leading browsers that support CSS3. In some cases other techniques are available making our life easier while waiting for CSS3 to break through and these will be briefly covered as well.

Have a Field Day with HTML5 Forms

http://24ways.org/2009/have-a-field-day-with-html5-forms/ Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with. Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.

Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks

In recent years, screen resolutions are getting both bigger (large monitors) and smaller (in the mobile sense), as such, a static or fixed web layout may no longer be deemed completely viable. Maybe its time to change. Liquid, fluid and elastic layouts, have as many supporters as fixed layouts, despite what ever your feelings are on these styles of layouts, having some knowledge on adapting a site to liquid or elastic would most definitely be a plus in your arsenal. In this article you will find a collection of starter and basic fluid/liquid and elastic layouts, CSS frameworks and some useful tools to help you with your next project. Tiny Fluid Grid http://speckyboy.com/2010/05/30/liquid-fluid-and-elastic-layout-templates-tools-and-frameworks/

50 New Useful CSS Techniques, Tools and Tutorials - Smashing Mag

Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content. However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect. In this round-up we present fresh useful articles about less-known CSS 2.1 and CSS3 properties as well as an overview of recently published CSS techniques, tools and tips for designers and web-developers. Please stay tuned: next week we will present the second part of this article, featuring fresh CSS3 techniques, tools and resources. Learn About Obscure CSS Properties
This series is supported by Rackspace , the better way to do hosting. Learn more about Rackspace's hosting solutions here . No matter where you sit in the HTML5/Flash debate , the fact is, more and more mobile or low-powered devices are being shipped either without or with very minimal support for Flash video. Web developers who design sites that utilize video need to be cognizant of this reality and design and build their sites accordingly. While it's great that video hosting services like Vimeo and YouTube support HTML5 and that solutions for larger sites are available from places like Encoding.com and Brightcove , that still leaves users who want to host their own video content — but don't necessarily use a platform like Brightcove — in a bit of a predicament.

5 Tools For Integrating HTML5 Video in Your Website

You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.

How to Make an HTML5 iPhone App

Hack for CSS3 Supporting Browsers

Hack for CSS3 Supporting Browsers Posted By Estelle Weyl on April 6, 2010 Implementing CSS3 features in your CSS file can be complex. You have to make sure that the CSS you’re feeding to FF3.5+, Chrome, Opera and Safari are not being read by FF2, IE6, IE7 and IE8. There’s a simple hack to make sure that your CSS3 is fed only to browsers that support it… it’s forward compliant and it’s valid markup. selector:nth-of-type(1n)
This either means that the username and password information in your wp-config.php file is incorrect or we can't contact the database server at 10.10.67.142 . This could mean your host's database server is down. Are you sure you have the correct username and password? Are you sure that you have typed the correct hostname? Are you sure that the database server is running?

CSS Specificity And Inheritance - Smashing Magazine - StumbleUpo