Detect CMYK in Browser

NewImage

 CMKY is supported in CSS3, but many browsers don’t provide support for it – and hence a problem if you have images rendered in it. CMKY as we well know, is used by designers and printing houses for it’s ease of use. As of CSS3 there is new color support; (with accompanying api calls) as below:

  1. HSL – hsl(hue, saturation, lightness)
  2. CMYK – cmyk(cyan, magenta, yellow, black)
  3. HSLA – hsla(hue, saturation, lightness, alpha)
  4. RGBA – rgba(red, green, blue, alpha)

A question in this direct context was asked on StackOverflow on how to detect CMYK support in the browser. 

Now there is three ways to resolve this:

  1. Server-Side Code (Asp.Net – Bitmap Api or Php – getImageSize – by looking at the image properties and maybe converting it to RGB to avoid this whole mess
  2. Browser Detection (jQuery/HTML Directive)  – mark those browsers that don’t support it, predominantly IE.
    1. if($.browser.msie && parseInt($.browser.version,10)<=8){}
      <!--[if IE 8]> <![endif]-->
  3. Javascript – validation by using the API and throwing an exception to validate it’s existence

I am going to be looking at the last method, number 3, as the prior two are real hacks and lead Alice down a Rabbit Hole she really shouldn’t traverse;

<html>

<head>

<script>

var IS_CMYK_SUPPORTED = (function(){

var value =‘cmyk(1%,1%,1%,0.5%)’,

el = document.createElement(‘p’),

result = false;

try {

el.style.color = value;

result = /^cmyk/.test(el.style.color);

} catch(e) { }

el = null;

return result;

})();

</script>

</head>

<bodyonLoad=‘alert(“IS CMYK Supported:” + IS_CMYK_SUPPORTED)’>

</body>

</html>


Simplistically, all that is happening here is a creation of an element to which we then try and set a color using the CMYK api. If the support is there we will return a valid result, if not the result will be false (via the exception thrown).
 
Hope this helps.
 
Reference the following URL for added information
Don't be shellfish...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrEmail this to someone

Why should I use SASS?

 Problem:

Being a web developer one often hits that momentous stumbling block, of though being able to knit code together amazingly, that the “code’s face”, the actual UI is not quite what as “beautiful” as it’s internal structure. Perhaps a reason for this is not a lack of creativity, but rather a syntax that is “sour, leaving a bitter taste” in ones mouth – and that of CSS. Sometimes it’s not that the developer lacks “design skills”, but that he or she fails to come to terms with a language that’s “crude and difficult to read”. 

It’s kind of like an “artist” who has a palette with “two colors”, and the result of every painting is a boring stale end-result that is repeated over and over. However, if the “artist” is then informed, that he/she has an array of colors, as they find or choose to be necessary; then what can be created is truly marvelous!

My point – CSS for new developers can take a while to understand, grasp or even stomach, and in steps SASS (Syntactically Awesome Style Sheets). This then, is that introduction to something sweet that can help make your “web development” experience more pleasurable and less painful (easy to maintain, and less repeatable).

 

SASS

What Is SASS?

SASS friend, is simply a framework or rather a set of tools for allowing developers to leverage CSS in a manner that is more logical, and as “Rails developers like to say”, more DRY (Don’t Repeat Yourself).

Why use SASS?

Why use SASS? Now a Google will return lots of results and I mean there are so many frameworks out there, unless referred to by a colleague etc; you almost pass it by, thinking it’s just another “web” technology among the myriad. So to address that I would like to just cover 3 of Top “PRO’s” of SASS, that can bring immediate improvement to your “development time and experience” and perhaps persuade you to use it.

Variables

In developing any web site, I like to stick to 3 colors at a maximum to predominantly decide the look and feel or the UI. Often times, I find myself hunting down shades of one primary color, like blue, light-blue etc (or rather their HEX Values).

The beauty of SASS, is that we have Variables, yes, actual “Variables”, so you can do something like:

 $gray-Dark: #474546;

So now, when I need to reference that, let’s say for a 


header {
 background-color: $gray-Dark;
}

footer {
 margin-top: 30px;
 padding-top: 5px;
 border-top: 1px solid $gray-Dark;
 background-color: $gray-Light;
}

The power behind this of course, is now you have one reference point for changing a color as opposed to rippling through multiple CSS or a large CSS to change the color for all accompanying tags. Also a great plus, for quick “mockups”.

But let’s say, however, I wanted to make my footer slightly lighter as a variant of Gray. I could define a new variable, as such:


$gray-Light: lighten($gray-Dark, 20%);

footer {
 margin-top: 30px;
 padding-top: 5px;
 border-top: 1px solid $gray-Dark;
 background-color: $gray-Light;
}

There are a myriad of other functions, and you should check that out (like “darken”, “lightness” etc).

Nesting:

Now traditionally with CSS you would do the follow to NEST;


#header {
 background-color: $gray-Dark;
}

#header h1 {
 float: left;
}

With SASS, ‘nesting’ is much sweeter; we can NEST directly inside the target (class).


#header {
 background-color: $gray-Dark;

h1 {
 float: left;
 }

}

Functions:

Would you believe it, yes, your own functions. Now I cannot express enough the power behind this, but let’s use an example to give you some idea.


#header {
 background-color: $gray-Dark;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;

h1 {
 float: left;
 }
}

#nav-left {
 padding: 5px 12px;
 margin: 10px 0;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

#footer {
 border: solid 1px $gray-Dark
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

Now as you can see the border-radius is repeated 3 times. A change to one would require me to meticulously make changes to all three. But that’s a bit cumbersome not to mention extra code, extending the size of my file, and decreasing readability. With SASS, I can instead rip out this ‘CSS’ and create a seperate function for this which I can address in all 3 places.

At the head of my file, where my variables are declared; we add in our Function, or as SASS calls it, MIXIN.


@mixin &lt;name&gt; {

// CODE TO REPEAT
}

@mixin rounded-corners {
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

And it’s implementation like this:


#header {
 background-color: $gray-Dark;
 @include rounded-corners

h1 {
 float: left;
 }
}

#nav-left {
 padding: 5px 12px;
 margin: 10px 0;
 @include rounded-corners
}

#footer {
 border: solid 1px $gray-Dark
 @include rounded-corners
}

But let’s say, the rounded corners are different for #nav-left – instead of 10px for the border-radius it should be 8px. How can SASS help us?

Well a “function” (mixin) is not a true function unless we can also provide “parameters” or “arguments”. So let’s modify our MIXIN a little to support custom radii.

That is:


@mixin rounded-corners($radius) {
 border-radius: $radius;
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
}

But before we implement, how about a default, in places were the MIXIN is used, but no radius is specified;


@mixin rounded-corners($radius: 8px) {
 border-radius: $radius;
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
}

Beautiful isn’t it, but let’s look at our implementation, which if you being any sort of developer should already have in your mind:


#header {
 background-color: $gray-Dark;
 @include rounded-corners(10px);

h1 {
 float: left;
 }
}

#nav-left {
 padding: 5px 12px;
 margin: 10px 0;
 @include rounded-corners(8px);
}

#footer {
 border: solid 1px $gray-Dark
 @include rounded-corners(10px);
}

But the programmability doesn’t end there, and again, so not to overload you with information, but to give you an understanding of it’s power; SASS also supports Conditional States (if, else if, else); as well as “For” loops and “For Each”.

Conclusion:

This is just the tip of the iceberg of SASS, and if you would like to learn more, you can visit the following links:

  1. SASS Website
  2. SASS Functions
  3. Beginner Tutorial on SASS
  4. Advanced Tutorial on SASS
Don't be shellfish...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrEmail this to someone