/*

	1312 vs. Technique Retreat
	
	CSS - Styling for a beautiful web

	18/03/11
	
*/

#contact {
    name: "Mike Byrne";
    twitter: "@13twelve";
    url: "http://www.thirteentwelve.com/";
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ agenda */

#agenda {
}
    #my_process .how-I-start-a-FE-job {
    }
    #my_process .how-I-structure-CSS {
    }
    #my_process .pros-and-cons-of-my-approach {
    }
    #my_process .how-agile-changed-things {
    }
    
    #your_processes .how-do-you-do-yours {
    }
    
    #optimisation {
    }
    
    #debugging {
    }
    
    #conditional_comments {
    }
    
    #browser_hacks {
    }
    
    #css_sprites {
    }
    
    #css3 {
    }
    
    #namespaces {
    }
        #nottobeconfusedwith #css3 .namespace {
        }
            #nottobeconfusedwith #css3 .namespace .what_why  {
            }
            #nottobeconfusedwith #css3 .namespace .usage  {
            }
            #nottobeconfusedwith #css3 .namespace .interesting  {
            }
            #nottobeconfusedwith #css3 .namespace .more  {
            }


        #namespaces .why {
        }
        #namespaces .how {
        }
    

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ content */

#my_process .how-I-start-a-FE-job {
    /*
        - Waterfall method
            - consume all the artwork
            - consume the specs
            - ask lots of questions

        - Agile method
            - consume the available artwork
            - use experience and judgement to guess :-)
    */
}

#my_process .how-I-structure-CSS {
    /*
        - /stylesheets
        	/stylesheets/modules
        	/stylesheets/pages
        - /javascript
        - Asset packer/YUI Compressor http://developer.yahoo.com/yui/compressor/
    */
}

#my_process .pros-and-cons-of-my-approach {
    /*
        - Pros
            - speedy development
            - multiple developers on same project
            - easy for others to update
            - scales well

        - Cons
            - repeated CSS
            - indent method doesn’t suit everyone
            - long selector strings
    */
}

#my_process .how-agile-changed-things {
    /*
        - less artwork
        - less wireframes
        - more guess work :-/
    */
}

#your_processes .how-do-you-do-yours {
    /*
        So?
    */
}

#optimisation {
    /*
        - shorter selectors
        - more IDs
        - more classes
        - risk of being harder to maintain :-/
        - name space
        - less CSS (http://lesscss.org/)
        - sass (http://sass-lang.com/)
    */
}

#debugging {
    /*
        - floatClearing
            - overflow: auto;
            - :after { content: "." } ############## EXAMPLES
        - firebug
        - developer tools   
        - ySlow!
    */
}

#browser_hacks {
    /*
        - Invalid CSS
            - so what?
            
        - Internet Explorer
        	- Invalid (on the attribute)	    	
    	        /9; - for IE8
    	        *display - for IE7
    	        _display - for IE6
	        
    	        eg:	.class {
    					color: #f00; - All browsers
    					color: #0f0/9; - IE8 only
    					*color: #00f; - IE7 and below
    					_color: #000; - IE6 and below
    				}
    		- Valid (on the selector)
    			#id .class {
    				color: #f00; - All browsers, but in this case, IE6 will do this
    			}
    				#id > .class {
    					color: #0f0; - IE6 can't do child selectors so will fail on this, IE7 will do it as will the good browsers
    				}
    				#id >/**/.class {
    					color: #00f; - IE6 and IE7 will fail on this, they can't do comments in the selector string, so this is what all the good browsers will actually show.
    				}
				
    		- more and some explanations http://www.positioniseverything.net/
		
		- Webkit
		    @media screen and (-webkit-min-device-pixel-ratio:0) {
		        .myClass { background-color: #FF0000; }
                 #myId {color: #0000FF;}
                 p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);}
		    }
		- Mozilla
		    @-moz-document url-prefix() {
                .myClass { background-color: #FF0000; }
                 #myId {color: #0000FF;}
                 p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);}
            }
    */
}

#conditional_comments {
    /*
    
    For body helper classes:
    
    <!--[if lte IE 6]><body class="ie ie6"><![endif]-->
    <!--[if IE 7]><body class="ie ie7"><![endif]-->
    <!--[if IE 8]><body class="ie ie8"><![endif]-->
    <!--[if gt IE 8]><body class="ie"><![endif]-->
    <!--[if !IE]>--><body><!--<![endif]-->
    
    
    To load in browser specific stylesheet. Good or Bad?
    
    AOL says bad: 
    "Conditional comments are frowned upon, 
    as it requires supporting a separate set of styles and 
    loading an additional file, leading to rendering delays."
    
    I say bad:
    Just because I want to see all the CSS for an element in one place
    
    Lots of people say good:
    because they do it lol
    
    */    
}


#css_sprites {
    /*
        - sprite.png
        - less images
        - more time
        
        - Methods to build
            - psd on a server
            - drop box
    */
}

#css3 {
    /*
        - Any Questions?
        
        - progressive enhancement/graceful degredation/hard boiled
        - http://quirksmode.org/css/contents.html
        - http://www.css3.info/preview/
    */
}


#namespaces {
}
    #css3 .namespace {
        /*
            - New to CSS3
            - @namespace
        */
    }
    #css3 .namespace .what_why {
        /*
            - Its not just HTML that uses CSS
                - XML
                - styling part of SVG
                - CAS (Action Sheets)
                - IE CSS extentions
                - Mozilla CSS extentions
                - oh and HTML (in both xHTML and SGML flavours)
        */
    }
    #css3 .namespace .usage {
        /*
            - Styling a circle element in SVG:

                circle { color: red; }

            - But what if something else uses "circle" ?

                Then you'd want:

                svg circle { color: red; }


                Which you'd do by:

                @namespace svg "http://www.w3.org/2000/svg";

                svg|circle { color: green; }


            - A namespace prefix is declared only within the stylesheet the @namespace attribute is created 
                - not within any stylesheet imported or importing this stylesheet
            - The namespace prefix is case-sensitive
            - If a namespace is not declared, then it is considered the default namespace
            - A CSS qualified name is name associated with a namespace
        */
    }
    #css3 .namespace .interesting {
        /*
            Maybe, dunno. I'm not going to worry about it.



            Although there is an interesting work around to get IE to treat HTML5 elements 
            (heh and the abbr element)

            <html xmlns:html="http://www.w3.org/1999/xhtml">

            html\:abbr, abbr {
    			background: yellow;
    			border: none;
    			cursor: help;
    		}

    		<html:abbr title="abbreviation">abbr</html:abbr>

            http://dean.edwards.name/my/abbr-cadabra.html

            (ok so you'd need every element and style this preface: http://doctype.com/html5-yet#answer_3428)
        */
    }
    #css3 .namespace .more {
        /*
            More:
            - W3 http://dev.w3.org/csswg/css3-namespace/
            - CSS3 Namespace Selectors http://www.oxygenxml.com/doc/ug-oxygen/topics/dg-namespace-selectors.html
            - Support http://dev.l-c-n.com/CSS3-selectors/browser-support.php
            - Hixie's proposal http://hixie.ch/specs/css/css-namespaces


            ## 
            http://xhtml.com/en/css/conversation-with-css-3-team/
            http://reference.sitepoint.com/css/at-namespace
        */
    }
    
    
    #namespaces .why {
        /*
            Compatible with toxic environments
            Sites with many properties, such as AOL, will update their headers, footers and borrow elements
            BORK!
        */
    }
    #namespaces .how {
        /*
            Pick a short unique identifier
            
            #m1312_header { ... }
            .m1312_slider { ... }
            
        */
    }