Validation

While trying to solve a validation issue in one of my web sites I came across the following forum posting. It was stated so well that I decided to re-post it here. I want to encourage my readers to understand that when a page doesn’t pass validation, it doesn’t mean that the page is “broken”. Please read on…

Validation is a tool. It is not a goal. It is for catching syntax errors. It is for you to determine whether to worry about the error or not.

The animations module is in working draft status.

Quote:

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

Emphasis added.

It would be foolish for vendors to implement a module that is likely incomplete and certain to be modified in ways that would affect that implementation. That is why we have the -[vendor]- prefix. It’s a temporary implementation until the dust settles.

If your client is insisting on a validation button, you’ll have to explain why that’s not possible. Using css3 is a progressive enhancement; in this case from both sides. Older browsers won’t support css3 animations, and css3 won’t validate the proprietary prefix that allows for working draft properties that are not a part of the specification yet.

Gary Tuner, (Moderator on http://csscreator.com)
Source: http://csscreator.com/topic/w3c-validator-and-css3

Browser coordinate system

Student Question:

“I have a question about the box shadows: what if you don’t want the box shadows to appear on the right and bottom of the box? The code that we used (ex. -webkit-box-shadow: 1px 1px 4px black;) doesn’t specify locations. What if, instead, I wanted the shadows to appear on the top and left sections of a box?”

Response:  “As far as the controling the placement of shadow effects… just a guess, try putting in negative numbers and see how that affects it. Remember, the numbers indicated pixel locations.”

“Why are there negative numbers here?”

“Are you asking why I would try a negative number?”

“Yes, I’m asking why using a negative number would be different than using a positive number. This is the only code we’ve seen that can use negative numbers, and I don’t understand why.”

Let’s go into more detail

Do remember the cartesian Coordinate system from High School geometry? http://en.wikipedia.org/wiki/Cartesian_coordinate_system. It is simply a way of representing 3 dimensional space on a 2-D surface.

Think of the browser window as having a x, y, and z axis (actually it does). The x-axis is horizontal. The y-axis is vertical. The z-axis is perpendicular to the window. In geometry we learned that positive numbers are to the right and negative numbers are to the left. A location of any point in the window is relative to a point of origin. The point of origin, i.e. (0,0,0) in a browser window is the upper left-hand corner of the window. Positive X values are to the right. Positive Y values are towards the bottom of the screen. Positive Z values are coming out of the window towards you. Therefore, the negative directions of each axis are in the opposite direction.

In the case of working with drop shadows in CCS3, we use the following syntax…

box-shadow: h-shadow v-shadow blur spread color inset;

where

  • h-shadow is the horizontal distance
  • v-shadow is the vertical distance
  • blur is the blur distance
  • spread is the size of the shadow
  • color is the color of the shadow
  • inset [optional] changes the shadow from an outer shadow to an inner shadow

The distance parameters of the drop (box) shadow are relative to the location of the element that they are affecting. So a 10px distance for h-shadow would be to the right of the element. a v-shadow value of 10px would be under the the element; i.e. towards the bottom of the screen. Consequently, if you use negative numbers, the directions would be in the opposite direction of the relative axis.

Examples:

 

Positive direction ,   box-shadow: 10px 10px 5px #888888;

 

negative direction    box-shadow: -10px -10px 5px #888888;

 

Attribute syntax in HTML and CSS

A student asked the following question…

“I understand what we’re doing, but I’m worried about memorizing all of the coding. It might help if I understood the reasons behind all of it. For example, why do font changes need semicolons on them and not just a closing quotation mark like other things?”

Great question and I believe what you are referring to is the difference between an attribute in a HTML tag and a property declaration in CSS. In HTML, an attribute modifies or embellishes a tag. Attributes follow the following syntax:

<tagName attribute=”value”> Some content </tagName>

The value is always surrounded by quotation marks. For some attributes like href for example, it is easy to see.

<a href=”some URL”> link text </a>

Specifying the type of font I want to display is a bit different since we no longer use the <font> tag in xHTML. Cascading Style Sheet, CSS, declarations are used to specify font presentation as outlined in the W3C recommendations1. Properties in CSS are defined using the following syntax

property: value;

If I want to change the font family for a specific paragraph using an inline Cascading Style Sheet declaration, I need to use a CSS declaration within the context of a HTML tag. An attribute was created to accomplish that, the style attribute. The basic syntax of that code would look like…

<tagName style=”CSS declaration”> some content</tagName>

So, for example, lets say I have a <h1> heading element. I would like the heading to be in a Verdana font. If a Verdana font is not available on the viewers computers, I’d settle for an Arial font. If neither is available, I at least want a sans-serif font used. In CSS syntax that would look like the following”

font-family: Verdana, Arial, sans-serif;

Now, let’s place that CSS declaration into a HTML attribute

<h1 style=”font-family: Verdana, Arial, sans-serif;”> Some content </h1>

That is why the punctuation of colons, commas, and semi-colons all have to be included between the quotation marks. It is because the CSS syntax has to fit within the HTML syntax.

References

Lie, HÃ¥kon Wium and Bos, Bert (April 2008). Basic concepts. Cascading Style Sheets, level 1 W3C Recommendation. http://www.w3.org/TR/REC-CSS1/#basic-concepts