Tag Archives: css

Mar 17 2013

CSS3 Selectors

Posted on by

CSS3 came with a new set of selectors providing more ways to specify the DOM elements to apply the styling. Utilizing them can save some DOM manipulation done by JavaScript which makes your app run more efficiently. While many of the CSS3 properties are not supported by IE version 9 or below, most of the CSS3 selectors with only a few exceptions are supported by IE9. Make sure you are aware of them and start using them whenever you can.

  • Attribute Selectors 
    [data-action-type ^= "add"] - the element with data-action-type attribute and the value starts with "add".
[data-action-type $= "add"] - the element with data-action-type attribute and the value ends with "add".
[data-action-type *= "add"] - the element with data-action-type attribute and the value contains "add".
  • Combinator 
    F ~ E   - the element that's following element F  
E + F   - the element that's immediately following element F (CSS2)
  • Pseudo-class Selectors 
    E:target                - the element that was targeted. 
E:empty                 - the element that has no children
E:not(s)                - the element that does not match CSS selector s
 
E:nth-child(n) 	        - the n-th child of the element 	
E:nth-child(odd) 	- the odd number child of the element. Can be even as well.
E:nth-last-child(n) 	- the n-th child from the last one of the element
E:first-child 	        - first child of the element (CSS2)	
E:last-child 	        - last child of the element 
E:only-child 	        - only child of the element 

E:nth-of-type(n) 	- the n-th element of E's type 	
E:nth-last-of-type(n)   - the n-th element from the last one of the type
E:first-of-type 	- first element of the type 	
E:last-of-type 	        - last element of the type 
E:only-of-type 	        - the only element of the type

    Below is an example of a tab container without using JavaScript. Click on the tab title to view the content. The default tab can be selected by adding the hash tag in the URL.

  • Other CSS1/2 Selectors you may have missed 
    E[data-action-type]     - the element that has data-action-type attribute
E::first-line           - first line of the element
E::first-letter         - first character of the element
E::before               - add content before the element
E::after                - add content after the element

Related readings:
CSS3 specification: w3.org/TR/css3-selectors/#simple-selectors
CSS3 and HTML5 browser support: findmebyip.com/litmus

Apr 2 2012

CSS Box Model and Dojo/dom-geometry

Posted on by

Since Dojo 1.7, dojo.position, dojo.marginBox, and dojo.contentBox should be called with dojo/dom-geometry module. dojo.position returns an object for the size and the x/y coordinates of the domNode. marginBox and contentBox are based on CSS box model so users can manipulate the position of a domNode. Basically marginBox includes information for margin/padding/border-width, but contentbox only looks at the padding and the domNode itself.

HTML:

<div id="firstBox">Box #1 W:60px H:60px</div>
<div id="secondBox">Box #2 W:100px H:100px</div>

Dojo 1.7:

require(["dojo/parser", "dojo/dom-geometry", "dojo/domReady!"], function(parser, domGeom) {

    var marginBox = domGeom.getMarginBox('secondBox'),
        contentBox = domGeom.getContentBox('secondBox');

    console.log(domGeom.position('secondBox'));
    console.log("MarginBox - T: " + marginBox.t + ", L: " + marginBox.l + ", W: " + marginBox.w + ", H: " + marginBox.h);
    console.log("ContentBox - T: " + contentBox.t + ", L: " + contentBox.l + ", W: " + contentBox.w + ", H: " + contentBox.h);

    setTimeout(function() {
        //set the width and height of the domNode 
        //size will not be the same as the first box becuase of the padding
        domGeom.setContentSize('secondBox', {
            w: 60,
            h: 60
        });
    }, 2000);

});​

CSS:

#firstBox{
 width:60px;
 height:60px;
 border:1px solid #1de;
}

#secondBox {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 1px solid #ccc;
  position: relative;
  top:10px;
  left:10px;
}​

Two boxes before the second box is resized:

Output in console:

Jun 4 2011

Simple HTML5 Template

Posted on by

HTML5 introduces and enhances a wide range of exciting features including multimedia, form controls, structure, and semantics. It’s important to be aware of those semantic tags to construct your fully functional and structured HTML5 pages. To make sure IE recognize the htm5 tags, add the following code on your page between the head tags.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Here is a simple HTML5 template: