Our Blog!

So where do we go from here? What is next for XHTML?

XHTML 1.1 is essetially the “strict” DTD from XHTML 1.0…It drops all the deprecated elements and attributes from XHTML 1.0, and makes a few other tweaks (eg: common LANG attribute dropped in favor of “xml:lang”, and the addition of the “RUBY” element module.) XHTML 1.1 is designed to be strongly geared toward the document structure, with presentation details to be left to style sheets.

Frankly, XHTML 1.1 may be a little ambitious for many authors at the current stage of browser development, but it is definitely a milepost of where web authoring has been attempting to head for many years: a clear separation between document structure and appearance. XHTML 1.1 finally declares that the time for this separation has come.

Detect browser

Although it is better to use CSS conditionnal comments to detect a specific browser and apply some css style, it is a very easy thing to do with JQuery, which can be useful at times.

1. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $(”#header li a”).css(”margin”, “1px” );

2. Target Safari
if( $.browser.safari ) $(”#header li a”).css(”margin”, “1px” );

3. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $(”#header li a”).css(”margin”, “1px” );

4. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= “1.8″ ) $(”#header li a”).css(”margin”, “1px” );


Preloading images

When you’re using images in Javascript, a good thing is to preload it before you have to use it. This code will do the job:

jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[i]);
}
};

// Usage
$.preloadImages(”image1.gif”, “/path/to/image2.png”, “some/image3.jpg”);

I know there are some people, who still use margin-top, margin-right, margin-bottom and margin-left. But with some technic you can short up your CSS Code. It makes your code easy and light. Not waste your time in code Number of Lines.

In shorthand, remember that the properties start at the top and work clockwise. margin: top right bottom left; It’s also know the shorter forms if you have equal values for top and bottom or left and right.


margin: 5px 10px 20px 5px; /* top/right/bottom/left */
margin: 10px 20px; /* top/bottom left/right */
margin: 0; /* all sides */


For border, if you only have to set more than one side differently then use two declarations. The first to set all sides, and then a second to change the values for one of the properties.

/* 1px blue border on the left and bottom */
border: solid blue; border-width: 0 0 1px 1px;


1. ALT+Click on the “eye” icon in the layer’s palette to hide all other layers.
2. Do you have trouble to find the cursor when you work with large canvases?
   Simply press the spacebar and you’ll see the hand icon where the cursor is located.
3. When you are applying a “drop shadow” layer effect, try to leave open the dialog box.
   You’ll be able to move the shadow with a simple drag and drop.
4. With a CTRL+Click on the triangle icon you can collapse or expand all layer groups
5. Another cool shortcut. Press CTRL+ALT+SHIFT+E
   (Mac: CMD+OPT+SHIFT+E) to paste all the visible layers in a new one.
6. If you hold down ALT+CTRL+SHIFT (Mac: CMD+OPT+SHIFT) while starting Photoshop you can reset all the Photoshop settings back to factory default. Very usefull if you have problems with some tools or the interface.
7. When you are in a dialog box, try to hold ALT(Mac: OPT) to transform the “cancel” button into a “reset” button. It doesnt work everywhere.
8. If you want to transform a path into a selection you have to press CTRL+ENTER (Mac: CMD-ENTER).
9. CTRL+ALT+Z (Mac: CTRL+OPT+ Z) to undo more than once.
10. Double Click on the stage (the gray area) to open a file or CTRL+Double Click to create a new file.

1. When an appropriate markup language exists, use markup rather than images to convey information.
   For example :-  use MathML to mark up mathematical equations, and style sheets to format text and control layout. Also, avoid using images to represent text — use text and style sheets instead.
2. Create documents that validate to published formal grammars.
   For example :- include a document type declaration at the beginning of a document that refers to a published DTD (e.g., the strict HTML 4.0 DTD).
3. Use style sheets to control layout and presentation.
   For example :-  use the CSS ‘font‘ property instead of the HTML FONT element to control font styles.
4. Use relative rather than absolute units in markup language attribute values and style sheet property values.
   For example :-  in CSS, use ‘em’ or percentage lengths rather than ‘pt‘ or ‘cm‘, which are absolute units. If absolute units are used, validate that the rendered content is usable (refer to the section on validation).
5. Use header elements to convey document structure and use them according to specification.
   For example :-  in HTML, use H2 to indicate a subsection of H1. Do not use headers for font effects.
6. Mark up lists and list items properly.
   For example :-  in HTML, nest OL, UL, and DL lists properly.
7. Mark up quotations. Do not use quotation markup for formatting effects such as indentation.
   For example :-  in HTML, use the Q and BLOCKQUOTE elements to markup short and longer quotations, respectively.

Samples of CSS Templates

http://www.freecsstemplates.org/css-templates/