CSS
Cascading stylesheets...
CSS, Image Sprites, Background Images and Website Optimization
This post was originally published on May 13th, 2004. As others are writing about the topic, I thought bringing it out of the archives would be worthwhile. A little recap The idea of placing multiple states of buttons and other elements that are used in background images took its roots, I believe,... Read more »
Sitepoint's The CSS Anthology - 101 Essential Tips, Tricks and Hacks
Please note that some links in this post are affiliate links. The Target Market The CSS Anthology was written for people who have some basic knowledge in CSS but need a place to turn to to find out what is the right way to do 'X' with CSS. Chapter 1 provides an overview of CSS, looking at selectors,... Read more »
Taming Your Multiple IE Standalones
Multiple IE standalones A while back Joe Maddalone uncovered how to set up multiple standalone versions of IE. This was great news, but one of the shortfalls was that they didn't accurately handle conditional comments. Thank you Manfred! Well, a short while ago over at PIE, guest author Manfred Staudinger... Read more »
Simple Clearing of Floats
The discovery Sitepoint CSS guru Paul O'Brien has discovered that by applying overflow:auto to the CSS rules for a parent div that contains a floated element, the parent div will expand to completely contain the floated element. Go check it out Check out the Sitepoint blog post here, and the example... Read more »
Applied CSS Management and Optimization
Before we get into the good stuff, a few little notes about dynamic CSS, something used in a few of the ideas discussed below. Dynamic CSS Many people are toying with the idea of dynamic stylesheets by doing some server side magic with their CSS by parsing it (with php, asp etc.) before it leaves the... Read more »
Discussing CSS Management and Optimization
The "young-old" technology that is CSS has proliferated over the last few years thanks to projects like the Wired redesign (and later more high profile redesigns, more examples...) and the CSS Zen Garden. Along with this, more and more designers are adding CSS to their toolkits and making their lives... Read more »
Light Weight Low Tech CSS Tabs
For the curious and impatient, Example A, B. The requirements A project we've been working on required a different colored set of tabs for navigation depending on the section that the users were using. We needed three color variations and we wanted to be able to easily change the colors used... Read more »
CSS Software - What program do you use to code your CSS?
Okay, we're still on haitus, however I'm chiming in with a quick reader survey. Users who do comment, and keep a cookie from this site, will not be subjected (once the reworking is launched) to the Adsense ads that are here now (thanks Simon for the help). So lets have it, what's helping... Read more »
CSS + PHP: Organized and Optimized?
Updated on 01/09/2004. While working the CSS for a design today, something occurred to me. Since we've been looking at using php with our css, many possibilities open up. These of course assume that you are passing your CSS to the PHP script handler... Note that I am using PHP and Apache here. Comments I'd... Read more »
Sliding Doors Meets CSS Sprites
A while back Douglas Bowman wowed Alistapart readers with his excellent article Sliding Doors of CSS, describing a new and revolutionary way to build a tabbed menu interface using CSS. Shortly thereafter, Dave Shea came along with CSS Sprites: Image Slicing’s Kiss of Death. In the article, Dave... Read more »
Http Requests, CSS and our Favorite Browsers
As alluded to in a previous entry, some interesting yet, quite possibly trivial observations were noted while testing the caching behavior of CSS files in Opera 7.50, Firefox 0.9, and Internet Explorer 6.0.So with no further ado, on to the facts... How our browsers request CSS files Part of the cache... Read more »
The Definitive Post on Gzipping your CSS - Compressing CSS
Note: This post was originally published on June 13th, 2004. It is being republished today because: the topic has been discussed in a few places recently, and, well, I accidentally republished it when editing it. Background Info This whole idea started back in February of 2004 and has evolved through... Read more »
More Notes on Gzipping CSS
The "official line" on this topic is being archived and updated here. Alun Bestor mentioned in the comments of Organizing and Optimizing Your CSS - Some ideas something that, after a little testing, was worth a post of it's own. Background information on this topic can be found in the original... Read more »
Create a Pull Quote with Javascript (and CSS)
Pull quotes, it turns out, are a well discussed topic on the web. I happen to find them useful, and they can be very eye catching. Have a look at some of these great examples of pull quotes by Mike Pick, for example (ironically, while setting out to find a decent example of a pullquote for this post,... Read more »
Organizing and Optimizing Your CSS - Some ideas
A lot of CSS posts here lately, a reflection of the stages we are at for a few of our projects. Some of our recent work has seen us build some relatively complicated style-sheets, a reflection of shooting for full cross browser compatibility using only CSS and also using some of the design effects that... Read more »
Http Compression - Results and user numbers
Note: The "official line" on this topic is being archived and updated here. A while back I wrote up a post that explained how you could use PHP's output buffering to take advantage of HTTP Compression and compress your CSS files. To summarize, your css files download faster by compressing them with... Read more »
More CSS - A new article and a great tool
How To Attack An Internet Explorer (Win) Display Bug John Gallant and Holly Bergevin are up to their bug killing ways, this time helping us mere mortals come to grips with things such as the Peekaboo Bug and the Escaping Floats Bug, and how can be used to help us with some of IE's enigmatic problems.... Read more »
CSS, Skip links and Logos
Skip links are really catching on for reasons of accessibility. You know the ones, they sit there in the background, hidden by CSS, offering non-css enabled browsers and other devices the opportunity to 'Skip to Navigation', or 'Skip to Content'. Most people place them at the top of... Read more »
Responsible CSS - Recycle your background images
Personally, I'm a huge fan of some of the beautiful work being done on websites that are styled with CSS. One look at the vault and you'll find many examples of great work. One of the shortfalls I'm seeing more and more is designers who rely a little too heavily on background images to pretty... Read more »
CSS - The Little Things
Its in the Details This is the first entry for what will be the 'Cool Tricks with CSS' category of this blog. Though not really a trick, this first example, from Dunstan Orhcard's blog, hilites a case of great attention to detail, the kind that can make your clients look good, which of... Read more »
Fast CSS Style Switching with PHP
Updated: New content added 12/03/2004. Here's a little something that has come in useful for me on a few occasions. It seems to be inevitable that at some point along the life of a project, someone from your clients company decides that they don't like the
Filling a block level element with an anchor
A few people that I work with have asked me about this little trick, so I thought I'd write something up here to explain it. A little article entitled "Filling a block level element with an anchor I", it explains just that: how to fill a block level element with a hyperlink. This first pass is a... Read more »
Css Semantic Challenge Results
The goal of the challenge: come up with a chunk of semantically valuble markup and the CSS that would reproduce the search result represented by the above image. Being a search result, the code had to allow for the possibility of several instances of the object on one page. Besides my own example,... Read more »
Css - Semantics Challenge.
You think you know your stuff? Lets see what you got! An aspect of a design that I am working on provided me with a bit of a challenge. The following image is the piece of design in question: What is the challenge? Take this image, and come up with the sematically valuble markup and CSS to make this... Read more »
Gzipping your CSS with PHP
Note: This entry was updated on the 23rd of February. A summary of the process can be found here. History Late last year I had the pleasure of redesigning a site that I'd coded a mere 6 months earlier. Talk about a humbling experience, it seems that I had a bad case of classitis during the first... Read more »
Check out the blog categories for older content
- 9 Rules
- Application Programming Interfaces
- Blogging
- Contingency Design
- CSS
- Fiftyfoureleven
- General
- Link Wrap
- Marketing
- News, Rants and Ephemera
- Programming and Scripts
- Search Engines
- Web Development
- Widgets that Work
- Working on the Web
The latest from my personal website,
Mike Papageorge.com
