Feb
3
2012

CSS3 Colors–RGBA vs. HSLA

hslThere really is no battle between RGBA and HSLA.  Either can accomplish the task of discovering the color that is just right for you.  Which should you choose?  Which is an easier concept for you to understand?

Red
Green
Blue

Hue
Saturation
Lightness

Alpha (opacity)

 

Again, which above is easier for you to understand?

According to the W3C:

4.2.4. HSL color values

CSS3 adds numerical hue-saturation-lightness (HSL) colors as a complement to numerical RGB colors. It has been observed that RGB colors have the following limitations:

  • RGB is hardware-oriented: it reflects the use of CRTs.
  • RGB is non-intuitive. People can learn how to use RGB, but actually by internalizing how to translate hue, saturation and lightness, or something similar, to RGB.

Is RGB truly non-intuitive?  By looking at the color wheel in this post would it be intuitive for you to know the hue value of 1 or 360 is red?  Which is easier to digest:  blue=blue or 240=blue.

It doesn’t really matter.  What really mattered to me was to understand the algorithm to convert from one to another.  Since alpha is simply a scale of opacity, I was more curious about the conversion of red, green, and blue to something light, saturated, and with hue.

To test my understanding, I set out to write a script that was CSS3 friendly.  In other words, it would use as inputs/outputs values used in the rgba() and hsla() functions in CSS3.  The result is the script below. 

As always, I value feedback Smile

// elsewhere in script use this way:
// var result = Palermozr.rgbToHsl(255,255,255);
// result.H // Hue (between 1 and 360)
// result.S // Saturation (between 0 and 100) %
// result.L // Lightness (between 0 and 100) %
var Palermozr= (function () {
    function rgbToHsl(r, g, b) {
        r /= 255;g /= 255;b /= 255;
        var max = Math.max(r, g, b),
            min = Math.min(r, g, b);
        var d = max - min,
            u = max + min;
        var h = 0, s = 0, l = u / 2;
        if (d !== 0) {
            s = l < 0.5 ? d / u : d / (2 - d);
            var rr = (((max - r) / 6) + (max / 2)) / d;
            var gg = (((max - g) / 6) + (max / 2)) / d;
            var bb = (((max - b) / 6) + (max / 2)) / d;
            switch (max) {
                case r: h = (bb - gg); break;
                case g: h = (1 / 3) + (rr - bb); break;
                case b: h = (2 / 3) + (gg - rr); break;
            }
            if (h < 0) h += 1;
            if (h > 1) h -= 1;
            h = Math.round((h * 360));
        }
        s = Math.round(s * 100);
        l = Math.round(l * 100);

        // returns object with H,S, and L property values
        return { H: h, S: s, L: l };
    }
    
    return {
        rgbToHsl: rgbToHsl
    };
})();
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
2
2012

Feature Detection Script for CSS3 Selectors

If you are a serious HTML5|CSS3 developer, you have undoubtedly come across the amazing resource known as Modernizr.  Modernizr is an amazing suite of script functions that enable feature detection to provide intelligent rendering across the multiple browsers that do or don’t support the desired feature.

Recently I was in need of a specific feature detection in CSS3 that I realized was not in the latest version of Modernizr – the ability to detect support for CSS3 Selectors.  Some examples of new CSS3 selectors include:  ::selection, :root, :target, :not, :checked, :empty … just to name a few. With necessity being the mother of invention, I took it upon myself to create the script needed to do the job. 

Here is the script, and I look forward to any feedback Smile

// elsewhere in script use this way:  
// var result = Palermozr.isSelectorSupported(":root");
var Palermozr = (function () {
    function isSelectorSupported(anySelector) {
        var newStyle = document.createElement("style"),
                cssRule = anySelector + "{}",
                isSupported = false,
                styles,
                rules,
                selectorText;
        newStyle.type = "text\/css";
        if (newStyle.styleSheet) {
            styles = newStyle.styleSheet;
            if (styles.cssText) {
                styles.cssText = cssRule;
                if (styles.rules) {
                    rules = styles.rules;
                    if (rules[0].selectorText) {
                        selectorText = rules[0].selectorText.toLowerCase();
                        isSupported = selectorText.indexOf("unknown") < 0;
                    }
                }
            }
        } else {
            newStyle.appendChild(document.createTextNode(cssRule));
            document.body.appendChild(newStyle);
            isSupported = !!newStyle.sheet.cssRules.length;
            document.body.removeChild(newStyle);
        }
        return isSupported;
    }
    return {
        isSelectorSupported: isSelectorSupported
    };
})();
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Dec
7
2011

HTML5 Form Inputs

My latest article published at DevProConnections is about collecting and validating data using the new HTML5 enhancements to form inputs. In the article I cover new attributes to input elements such at required, placeholder, and pattern. I showcase how to style forms with CSS3, and how to customize validation with script.

To read the article online, please visit HTML5 Form Enhancements with CSS3 and JavaScript at DevProConnections!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Nov
10
2011

HTML5 Web Camp Videos

The highly popular HTML5 Web Camp events sponsored by Microsoft are typically filled to capacity when delivered at any location.  In my humble opinion, the best HTML5 Web Camp delivered to date was in my hometown of Phoenix, AZ.  Fortunately, the team at EventDay showed up that day to record every session.  With great pleasure, I announce the availability of these videos for you to watch at your convenience – for free!

video-callouts

Each video provides a simple user interface that allows you to see the presenter, the content on the screen, and navigation controls to the topic you are most interested in.  When the screen in maximized, you will truly be immersed into the experience as if you attended live!

 

 

The link for all these videos is found below.  Please share with your community!!!

http://bit.ly/html5camp-videos

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
20
2011

WUX201 Transition Your Sites to CSS3

The CSS3 session that followed the HTML5 session was very fun to presesnt.  Thanks to all who attended.  Please enjoy the demos used in the presentation by downloading the zipped files below.

CSS3 DEMOS

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Aug
28
2011

HTML5 is in Style

devpro_html5_css

The next article at DevProConnections is out!

This article is all about using the new features in CSS3 in your HTML5 web sites.

This article discusses layout, media queries, and the little things that make a difference to user experience!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Aug
24
2011

HTML5 Web Camp in LA

The HTML5 Web Camp in LA was clearly the best one yet.  Hats off to all the volunteers and the attendees for being very prepared for the event. 

The event was very interactive, and many questions were regarding browser concerns.  There were a few questions regarding the future of development, and we did show a video regarding Windows 8.

The demo code featured during my presentations can be downloaded below:

[ HTML5 & CSS3 demo files ]

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jul
29
2011
css3 // html5 // script

What is the SSS in HTML5?

html5This will be the first of a series of blog posts to help someone new to HTML5 development.  The first item to address is:  What is meant by the term HTML5?  I like to think of it as “Triple S” or SSS.

  • Source
  • Style
  • Script

Source refers to the HTML markup itself, the tags.

Style refers to the inline styles and/or modules from CSS3.

Script refers to the development aspect of HTML5 with Javascript.

For an introduction to these terms in slightly more detail, please read the first article I co-authored with Daniel Egan.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jun
23
2011

Web Camp HTML5 – Irvine, CA

webcampsHere are the resources for the Web Camp HTML5 in Irvine, CA:

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jun
10
2011
css3 // event // html5 // webcamp

Web Camp HTML5 - Colorado Springs, CO

wcco

Friday June 10th is the date of the Web Camp HTML5 Event in Colorado Springs, CO.

[Download HTML5/CSS3 demo code!]

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives

Team Blogs

Download OPML file OPML