CSS = Chaos ?

  • Thread starter Thread starter Ian Semmel
  • Start date Start date
I

Ian Semmel

I have looked at various tutorials on css and get the concept.



Then I decided to look at a real example and downloaded the vs Commerce
example and checked out its css and master pages.



My question is, did someone work this out or is it a result of an
infinite number of monkeys pounding away at keyboards until they got
something to work ?



Comments from the css



/* Critical Safari fix! */

/* Holly hack for IE \*/

/* helps IE get the child percentages right. */

/* Hides from IE-mac \*/

/* IE 3px display bug fix (in conjunction with the rule following below)
*/



In the master page



<!-- Conditional comment to give IE/5/6/Win the javascript hack that
helps them do max-width. -->

<!-- Box model fixes for IE 5.0 and 5.5 -->

<!-- IE7-specific fixes -->



<body>

<div id="sizer">

<div id="expander">

<div id="wrapper" class="clearfix">



etc



In the real world, do designers work out wquivalent things or is it
standard to just copy and paste from earlier works ?



I don't know who invented css, but it seems to be the product of a
disorganised and illogical mind.
 
I would comfortably say the cheap RAM and Fast Hz and opportunities their are many monkeys. Possibly a small size infinity which is enough

Copy and past is the Rapid development method, sadly to say.

Junk code is everywhere.

I heard if it works then its is okay. Many developers can not think beyond one test. if it works that's it the boss is happy.


Do your best yourself and leave the rest.




I have looked at various tutorials on css and get the concept.



Then I decided to look at a real example and downloaded the vs Commerce example and checked out its css and master pages.



My question is, did someone work this out or is it a result of an infinite number of monkeys pounding away at keyboards until they got something to work ?



Comments from the css



/* Critical Safari fix! */

/* Holly hack for IE \*/

/* helps IE get the child percentages right. */

/* Hides from IE-mac \*/

/* IE 3px display bug fix (in conjunction with the rule following below) */



In the master page



<!-- Conditional comment to give IE/5/6/Win the javascript hack that helps them do max-width. -->

<!-- Box model fixes for IE 5.0 and 5.5 -->

<!-- IE7-specific fixes -->



<body>

<div id="sizer">

<div id="expander">

<div id="wrapper" class="clearfix">



etc



In the real world, do designers work out wquivalent things or is it standard to just copy and paste from earlier works ?



I don't know who invented css, but it seems to be the product of a disorganised and illogical mind.
 
The problem isn't with CSS itself, just with how different browser
developers choose to implement all or part of it at whim.

As far as how these solutions were arrived at, there seems to be a small
group of people out there who derive great satisfaction from finding these
"bugs" and producing fixes for them. Personally, I'd rather stick pins in
my eyes.

I know one thing, if I were tempted to use CSS that required "hacks", I'd
give up. Now, even the Holly hack needs a hack to make it work with IE7. I
mean, who could be bothered?


I have looked at various tutorials on css and get the concept.

Then I decided to look at a real example and downloaded the vs Commerce
example and checked out its css and master pages.

My question is, did someone work this out or is it a result of an infinite
number of monkeys pounding away at keyboards until they got something to
work ?

Comments from the css

/* Critical Safari fix! */
/* Holly hack for IE \*/
/* helps IE get the child percentages right. */
/* Hides from IE-mac \*/
/* IE 3px display bug fix (in conjunction with the rule following below) */

In the master page

<!-- Conditional comment to give IE/5/6/Win the javascript hack that helps
them do max-width. -->
<!-- Box model fixes for IE 5.0 and 5.5 -->
<!-- IE7-specific fixes -->

<body>
<div id="sizer">
<div id="expander">
<div id="wrapper" class="clearfix">

etc

In the real world, do designers work out wquivalent things or is it standard
to just copy and paste from earlier works ?

I don't know who invented css, but it seems to be the product of a
disorganised and illogical mind.
 
CSS is a wonderful technology, in fact, it is one of the best things to
happen to the web since server-side pages themselves. The reason for this is
the fact that you can have more control over how elements are rendered (for
example, different specifications for each border, spacing between elements,
exact widths for all elements, etc.). Because different browsers render some
elements slightly differently, this can make it much easier to make your
pages more compatible with more browsers. The thing that you need to be
careful about is to make sure all the CSS properties you use are implemented
in any browsers you expect users to view your site with (which, in most
cases, should be any browser). Although most modern browsers support most
CSS properties, there are a few that are not yet implemented by all
browsers. CSS can also save you a lot of work if you decide you want to
change the look of your site, because if you use CSS classes you only need
to change things such as the color, font, border, etc. in one place. And in
case you are not aware, many HTML attributes are being deprecated in favor
of CSS, so it would be a good idea to start using it and becoming familiar
with it as soon as possible.
 
CSS itself is well designed. The problem is not all browsers support the latest version of CSS and even then may not implement them correctly. The reality is, if you want your page to render properly on the largest number of browsers you have to deal with all sorts of work arounds for the bugs in each browser.


--
Andrew Faust
andrew[at]andrewfaust.com
http://www.andrewfaust.com


I have looked at various tutorials on css and get the concept.



Then I decided to look at a real example and downloaded the vs Commerce example and checked out its css and master pages.



My question is, did someone work this out or is it a result of an infinite number of monkeys pounding away at keyboards until they got something to work ?



Comments from the css



/* Critical Safari fix! */

/* Holly hack for IE \*/

/* helps IE get the child percentages right. */

/* Hides from IE-mac \*/

/* IE 3px display bug fix (in conjunction with the rule following below) */



In the master page



<!-- Conditional comment to give IE/5/6/Win the javascript hack that helps them do max-width. -->

<!-- Box model fixes for IE 5.0 and 5.5 -->

<!-- IE7-specific fixes -->



<body>

<div id="sizer">

<div id="expander">

<div id="wrapper" class="clearfix">



etc



In the real world, do designers work out wquivalent things or is it standard to just copy and paste from earlier works ?



I don't know who invented css, but it seems to be the product of a disorganised and illogical mind.
 
the problem is historial. IE lead the standards for a while. then IE
developement stopped, then Firefox became popular then IE started again.

The IE team has been unwilling to break pages to make IE support html
4.0 standards (given how much of the web is coded in ie quirks mode,
there was no choice). IE mac did support html 4.0 standards, so IE hacks
must detect its IE mac and follow html standards rather than IE quirks.
with IE 7, there has been a move to better support standards (though it
can be placed in quirks mode).

there is a CSS acid test site to test browser compliance.

http://www.webstandards.org/files/acid2/test.html#top

of course, as currently only safari passes the test. this means if you
write a fully compliant css page, safari may be the only browser it
displays correctly one.

if you think css is bad, wait until you get to ajax, and start using the
dom. even though the w3c standard xmlhttprequest was based on ie 5's xml
object, it took until version 7.0 for ie to support the standard version
(basically the last browser to).

the good new is that the browsers are converging on the html 4.0
standard, and in a few years life will be better. of course xhtml 1.1 is
out now, and no browser attempts to support it yet. though the open
source browsers like firefox and safari will probably be first.

-- bruce (sqlwork.com)
 
I agree.

It is akward really though because making a page scale and look right in all
browsers can be a very very difficult and time consuming excercise. However,
I dont think one needs to worry about safari or netscape simply concentrate
on making your pages look the same in IE and Firefox which represent
something like 98.5% of all browser clients, then make sure that safari and
netscape look "Reasonable", and you will be 99.99% there.

Its impossible to make them look and behave exactly the same in all
situations, just good enough so that the user experience is acceptable.
 
Ive found personally that wirting css code which renders on Firefox will
almost certainly render properly on IE "Most of the time". Doing it the
other way around yeilds poorer results as IE is too forgiving and allows the
developer to get away with too much.
 
Well it must be a fairly crappy standard if it allows browser writers to
produce such variances in rendered output.
 
Making it work in Firefox will cover a larger range of browsers
(including Netscape), because other browsers are based on Mozilla's
same browsing engine (Gecko). I focus on Firefox and IE, and check it
in Opera and a Linux browser or two (including Konqueror) every once
in a while. I actually don't get to check it in IE so often as I
should because I spend most of my time in Linux, but when I get
Windows up in a VM I check my stuff out in Windows browsers too.

CSS has many beautiful things (advanced selectors and such) that we
can't use because not all browsers implement them. I like to be able
to do things like this:

a[target='_blank']:after
{
content: ' (_blank)';
font-size: x-small;
vertical-align: top;
}

or

a:link { text-decoration: underline !important; }

....when I'm developing something that I am /sure/ will only be
accessed in Gecko (for a specific business or in an XUL app). I find
these things useful for customizing other websites anyway, though
(using Firefox's userChrome.css).

-Michael Placentra II
 
Ian Semmel said:
Well it must be a fairly crappy standard if it allows browser writers to
produce such variances in rendered output.
Click to expand...
<snip>

CSS is far from crappy. You have to understand the history of HTML and the
WWW to understand what is going on. When HTML was first introduced, back in
the late 90's, there were no such things as standards for web markup
languages, scripting, etc. It was a new invention, and it was written
without a lot of thought about extensibility. However, it did create a huge
increase in web usage and activity. This led to a crop of various "user
agents" (browsers) manufactured by a number of companies, beginning with
Netscape.

Originally, HTML used a fairly simple subset if SGML to create web pages.
Attributes and tags such as font tags in HTML elements were used to refine
their characteristics/properties. It was "extensible" in a sense, as you
could use (or add to the language) custom tags attributes which could be
picked up by any browser that understood them, and they would be ignored by
any browser that did not. In short order, due to the tremendous demand for
web pages to provide more and more types of content, various browser vendors
introduced a number of proprietary markups to enhance their browser and make
it competitive. Of course, this was all going on independently of the other
vendors. Sometimes vendors would accomodate the tags of others, and
sometimes not. This was all due partially to competition of the various
browser vendors for a mushrooming market share. This time is commonly known
as the "browser wars."

Now perhaps you can see where the browser compatibility problems began. This
was hell for developers who wanted to design web pages viewable by anyone in
the world, regardless of their software platform.

Standards began to emerge with the W3C primarily, a consortium of software
companies working together to remedy the problem, and CSS, along with a
number of other great improvements, came out of this. Of course, the various
browser vendors took quite some time, for a variety of reasons, in
accomodating the new standards, while remaining backwards-compatible at the
same time. XHTML also came out of this, and the "X" stands for "eXtensible."
XHTML and CSS were both designed with smooth and virtually limitless
extensibility in mind. These are great standards, but manufacturers comply
with them voluntarily (thank God - the last thing we need is for some
governing agency to control the Internet). The motivation is still
competition, but the motivation is now geared to encourage compliance with
these standards, as they are in common usage, and using them makes any
software more compatible across the world.

--
HTH,

Kevin Spencer
Chicken Salad Surgeon
Microsoft MVP
 
Back
Top