Completely CSS

Focusses on the CSS standard. CSS is designed for styling web pages and XML documents. It stands for Cascading Style Sheets. CSS does the work of two XML standards: XSLT and XSL-FO. CSS is more streamlined than these other two standards It lacks their flexibility/precision but on the other hand, those two lacks its concision.

Tuesday, January 22, 2008

CSS support in iPhone compared with other browsers

The iPhone has pretty decent CSS 3 support compared with some other web browsers, it seems.

That is a little surprising. What is also surprising is that it does not have quite as much support for CSS 3 as the Safari 3 web browser from Apple does.

Taking a look at the tables of test results at testing iPhone CSS will clue you in on just where the iPhone CSS support lies with respect to some other well known user agents.

Clearly, things will change over time. Hopefully, the author of the page will be updating it as these changes take place.

For now, it is apparent the iPhone has a pretty decent start at CSS 3 support, even at this phase.

Labels: ,

Sunday, August 06, 2006

Assigning property values, Cascading, and Inheritance

Yay!

I finally had occaission today to use a !important flag in one of my CSS rules.

W3 CSS spec, on rules flagged important:
an "!important" declaration (the keywords "!"
and "important" follow the declaration) takes precedence over a normal
declaration. Both author and user style sheets may contain
"!important" declarations, and user "!important" rules override author
"!important" rules.

I was fixing some styles in one of my blogs, and one line was having no effect.

I added !important at the end of one of the properties in the rule, and that fixed the problem.

Technorati tags:

Friday, August 04, 2006

For a good time, buy Designing with Web Standards

I bought and started reading Jeffery Zeldman's new book, Designing with Web Standards this week.



It is a great book for anyone who finds themselves tossed into the role of web page designer by accident - or by, well, design.
Let me tell a little story about myself, and then explain why I like this book - and why I think it is important enough to get a copy, read it, and hold onto it.

I am a programmer. I do most of my work on IT systems.

In the 1980s, these systems were drab. They were really nothing more than online, interactive veresions of the software known in the 1960s and 1970s as data processing systems.

They operated on terminals with 80x24 monochrome displays in the 1980s. That is all we had to use as programmers, and that is pretty much all companies would sell to users who would use the software they bought from us.

Then in the 1990s rolled in and computers using Windows 3.0 and later 3.0, 3.1, NT, 95, and 98 became the rage. These computers were seemingly inexpensive and offered more attractive/powerful user interfaces.

They were ten times harder to program than the old way. However, the results were an order of magnitude easier to use and a hundred times more attractive/fun. Basically, the age of user manuals was beginning to die. Computer software product ads could explain a product with screenshots too.

Life was good.

Then the web came in.

Making the user interface was even easier now. The end results - user interfaces consisting of forms and some pretty graphical images were easier for programmers to obtain now.

There was a little trickiness in keeping track of who the user was so you could figure out what to do with his data once he clicked the Submit button. A couple ways of soliving that problem were quickly discovered and put into wide practice. Life was pretty easy.

By and large, these web-based systems began to take over as the main vehicle for IT systems by the end of the 1990s and early 2000s. Desktop based GUI clients were still done, in Java now, rather than Pascal or C/C++.

By sometime around 2000, the role of the web designer was firmly implanted in IT culture.

Programmers and user analysts could design forms. They had been doing so for decades.

But they could not really make the forms look good. The aesthetics were usually not there, even if the required functionality was.

Enter the web designer who took care of that as his specialty, added a certain panache, and made the page gorgeous to behold as well as pleasant to use.

Often they would use a product called Macromedia DreamWeaver. It did most of its tricks doing funky, yes funky, things with HTML elements and a little JavaScript.

Later it added the ability to use CSS to achieve visual effects, styling, and layout. The CSS standard had been around from the late 1990s, so this was no big deal and even somewhat overdo.

It became necessary for some programmers to learn not only HTML - but also CSS. It was another computer language you had to know.


Now, back to the book. Originally, there was not CSS - just HTML. In fact, when I started writing HTML, there were no version numbers associated with the file format. There was only Mosaic tags and later they were joined by Netscape tags, which were a superset.

Netscape was written by the programmers who had written Mosaic, so no surprise there.

Later, Microsoft bougth Mosaic's source code and, in open source terminology, they forked it. They created their own divergent version of it and went off in a different direction with it from the main branch of development, which was going on at Netscape.

So, the two HTMLs were not completely compatible. Microsoft and Netscape founded the W3 to help keep their competitive natures reigned in so that compatibility would not be completely lost. If they had not done this, it seems possible that the two browsers would have diverged too much to use interchangeably on the same pagers.

Some companies, in fact many, have already achieved this dubious state of commercial Nirvana. The result, is when their users or IT departments want to switch to the another browser, they encounter problems.

The reason for this is pretty simple: vendors added some extensions to their web browser, and they did not fully - or quite correctly - implement the standards. Which is sad, because that was the whole point of having the standards in the first place!

CSS was a way of refining the authoring of HTML web pages. Instead of saying right at the point where you wanted to draw a box around something, Here, slap a table around this with some borders on it - you could say, Wrap this in a box and give the box an ID and/or tag it with a category called a class. Elsewhere, you could say what color to make the box, the text in it - and what kind of a border you wanted on the box.

Life was good - except for three things.

  1. The browser vendors were even more extreme with their lack of adherence to the CSS standard than the HTML standard. Small wonder, CSS made things really complicated for them to implement.
  2. Also, the prople creating the web pages did not bother to learn CSS as quickly as they should - perhaps in part because they were leaning heavily on the WYSIWYG page editors like DreamWeaver at this point - and it was not too savvy with CSS.
  3. Finally, there were mistakes galore in web pages: syntax/grammar errors in the computer language itself were rife in web pages used out oon the web - and cowering behind the walls of the IT sanctum.


Jeffery Covers all of this history and much, much mnore in rich detail. In fact, it is not only described. He accompanies it with lavish illustrations of how CSS is supposed to work, how one major vendor got it wrong as they say, and how the look of web pages has evolved - in a large part because of CSS.

The introduction, adoption, and fairly correct impelementation of CSS by most vendors is probably the most crucial factor in the great appearance and economical production of web pages today.

Programmers can certainly learn how to write CSS - it is simply another computer language. In fact, they had certainly better do that because they will find themselves generating a lot of HTML in their programs that will be controlled by theirs - or someone else's CSS. So knowing both languages is important.

This book can help make you an expert. Not just in terms of ivory tower knowledge, but in practical - what is now called pragmantic - terms.

I think this book is for developers and web designers who already know a little CSS, a little HTML, and perhaps have dipped from the well of XHTML a bit. People who know, yeah, there is a difference between how certain pages look in MS-IE, Mozilla Firefox, Apple Safari, KDE Konqueror, and Opera.

This book will get you on track to writing pages that do not look different in the different web browsers.

You probably have done enough with web pages to have encountered some problems. You already know, sort of, where those problems are coming from.

Jeffery tells you precisely where those problems are coming from and just what they are. He shows you how to avoid and/or address them. He teaches you why things are the way they are today, and where they are going.

He even shows you what the state of things was as recently as about 4 months ago.

This book was just published last month (July 2006) and it has really jumped the gun with a jaw-dropping 2007 copyright date. However, this is a book that will be extremely relevant in 2007 - as designers, programmers, testers, vendors, and users scramble to get their IE 5.x/6.0 web pages to look right in IE 7.0. Or as they will think of it, Longhorn Vista.

A ton of companies and individuals have already switched to Firefox. Both Microsoft and Mozilla agree that there are many parts of the W3 standards for CSS that MS IE 7.0 will not support. In fact, from the beginning of the IE 7.0 standard they never committed to fully catch up.

However, those CSS things work fine in Firefox. So some people and companies saw no need to wait for IE to get fixed. They have obviously been jumping ship in great numbers. Firefox, at last count, has about ten percent of the user base on the web.

If you look at developers/designers visiting sites that teach you how to design pages for the web - the statistics are even more compelling. About half of them are using Firefox. Since they are the ones actually creating the pages today that many people will use next month or next quarter - that tells you which way the wind is blowing. They are the wind.

Whichever direction your users are strolling, this book will help you create pages that look good to them, are easy for you to create and maintain, and everyone is happy with..

Ultimately, that is what it is all about.

I heartily recommend this book!

Friday, July 14, 2006

spelling error in URL for this blog corrected today

I made an embarrassing typo in the host name portion of the URL for this blog when I set it up.

The new URL is - http://completelycss.blogspot.com/
The old URL was - http://completelyccss.blogspot.com/ (sic)

Blotspot made it totally easy to change the URL. I just noticed the mistake today.

Since I told a few people about it during and after a little W3 standards get together in Bethesda tonight I figured I had better bet the URL corrected toute de suite (i.e., pronto, quickly, stat).

After all, I can't have 3 people in the world going, I cannot find that blog that guy told me about.

I think my total population of readers might have reached a theoretical ceiling of four folks now, counting myself - of course. You always count yourself until you break five readers.

If you found my blog and then lost it, I apologize for any trouble you had finding it again. Apparently, you did find it though - or you would not be reading this now!

Thursday, July 13, 2006

blogroll restored

I restored my blogroll for this blog this morning. There is now at least a short list of links to useful CSS-related websites.

Tuesday, June 27, 2006

Excuse the mess! Lost my Blogroll this evening...

No, lost my blogroll is not a quaint euphemism for the result of imbibing or devouring too much food and drink in too short a time.

It is what happens once in a while when I am getting the template in one of my blogs hosted on Blogspot.com.

It has happened once or twice before tonight. Tonight, it happened to three blogs, all one right after another.

I was editing each one of their templates in a different tab of the same Firefox 1.5 web browsing window.

I do not know if the fault was a flaw in Firefox, a flaw in Blogger.com, or a transitory communications glitch. Right now I am not leaning toward believing it was the latter.

I do however, know what the error was: a good chunk of the last part of my template for each blog just disappeared!

The failure, of course, I noticed when my published blog contained nothing but a command bar across the top, or not even that and just a little garbled Bloggerish-HTML.

Reacting the problem was simple - though left me with a tragic loss. I lost my entire list of handy links (i.e. Blogroll) in the sidebar in two of my blogs, one of which was this one.

I was lucky that I had a browse of one of the blogs open in another browser before this blog apocalypse happened. I was able to clip out and save that one's sidebar definition directly from the HTML of that page.

Fortunately, Blogger does provide a way chose a new template - and you can use that to restore an old one to its factory-settings.

This problem has hit other people. I have seen it in the Blogger-help newsgroup, so I know I am not the only one. Having been hit by it 4 or 5 times on 2-3 occasions, I can attest it is a bear when it happens.

If anyone from Blogger ever reads this, here is what Blogger does not do, and what it appears it should do, in order to prevent problems like this in the future.

  1. Include marker comments or better yet blogger tags at the very beginning and end of the document
  2. Make sure those marker comments/tags are there BEFORE replacing the old copy of the template.
  3. Validate the blogger tags. If the last bunch of them are empty, do NOT just overwrite the template without asking first, showing the user the BEFORE and AFTER version of the template, and getting them to fix-or-confirm the change before proceeding.


People who write blogger.com templates and people who write Blogger.com template editors should study this advice and decide if they can help with this or not.

The morals of the story are:
  • have backups
  • do not panic, you might still have a copy of something in an editor/viewer buffer or on disk
  • consider your recovery options carefully
  • use whatever information the disaster did not destroy to help recover


I should have my page looking almost as good as new shortly. Although, I did not have a backup, things mostly broke my way on the other 3 points.

Tuesday, June 20, 2006

Microformats catching on

Microformats seem to be catching on rather quickly.

Technorati already supports several. Weblogs are already beginning to use them. Very shortly, some of the leading web browsers will support them as well.

Go take ao look at the blog entry linked to below. It features a review of a popular social website, and the review is marked up using the jReview Microformat.

Johnny's Software Saloon: review of TV.com website with embedded hReview microformat metadata:
Note this blog post has been encoded with hReview standard format microformat metadata in order to make it easily digestible by social web services like Techorati.com and modern web browsers like Firefox 2.0.


CSS was originally designed for controlling font appearances and content layout on web pages. However, some of its element attributes are now seeing double-duty use as metadata fields.

Monday, June 19, 2006

Another weblog about CSS begins

Most of the web today completely relies on CSS for styling the appearance of documents.

Whether a web page is HTML, XHTML, or perhaps some other form of XML - CSS can be used to style it. Not just affecting the appearance of text - but also controlling the layout of different blocks of content on the page and even inserting images and text as needed - for a little extra panache.

While CSS is not as powerful as XSLT in terms of reorganizing and filtering the content of a document, it does have some strong advantages over XSLT.
  1. works with grungy real-world HTML pages, not merely XHTML/XML documents
  2. very concise way of defining rules - selectors and properties, that is all it takes
  3. supported by every web browser to some degree
  4. no programming skill required at all in order to be able to write CSS

There are a lot more things that they both have in common.
  1. can operate on any XML document (yes, it is true - CSS 2 can style XML)
  2. supported by virtually every browser, to some degree (note fully support CSS 2.1, the longtime current standard, yet)
  3. supported by every web browser to some degree
  4. Java text components support CSS, a little - and XSLT completely


I have been working with XSLT for almost 5 years, and CSS for almost 4 years.

I have had the odd pleasure of generating HTML pages with my CSS in them from my own hand-written XSLT. I generated XSL-FO marked up documents with the identical content and corresponding styles.

I like using all of them. They are a lot of fun. They are understood, literally, by software around the world.

There probably is not a desktop computer in the world at this point that does not understand these technologies. Certainly, every computer made in the past 7 years does.

So CSS is extremely relevant to business people, home computer users, bloggers, people reading/writing email - everyone who uses a computer, really. Even programmers, if you must know.

Because CSS is so important, I wanted to own a blog that would keep track of the exciting developments going on with this powerful tool. Text speaks what is on the mind. Adding CSS expresses it.