www.netsi.dk » css

Extend Object with method that handles CSS values in javascript

netsi — Thu, 12 Jan 2012 08:59:55 +0000

If you are working with CSS and need to for instance add or subtract a value to a CSS value like “15px” or “3em” this method “getCSSValueAndUnit()” will come in handy.

Simply add the code somewhere in the top to extend the “Object” object.

The method is used as follows:

"10px".getCSSValueAndUnit();

which will return an object:

{ 'value':10, 'unit':'px' }

Simple but very usefull!

Object.prototype.getCSSValueAndUnit = function() {
  var oReUnit = new RegExp('[0123456789\.-]', 'ig');
  var sOriginal = this.toString();
  var sUnitRaw = sOriginal.replace(oReUnit, '')
  var sUnit = sUnitRaw.replace(new RegExp(' ', 'ig'), '');
  var vValue = parseFloat(sOriginal.replace(sUnitRaw,''));
  return {'value':vValue, 'unit':sUnit};
}

Speeding up you CSS in Visual Studio using Web Essentials plug-in

netsi — Tue, 29 Nov 2011 20:06:21 +0000

Mads Kristensen (@mkristensen) is the name of the person bringing speed and hope for the CSS part of Microsoft Visual Studio. He is adding new life the the rather dead CSS part of Visual Studio. He is doing so through his free plug-in for Visual Studio: Web Essentials.

The features

In general Web Essentials makes working with CSS in Visual Studio more nice, adding features like colour and font preview, change of values using Ctrl+Arrows (up=add, down=subtract as you know it from for instance Firebug and Google Chrome), option to base64 encode images and speed typing. I can only recommend this plug-in, and also the fact that Mads listens to you request given to him for instance through twitter makes me a happy user! Well done Mads, and keep up the good job!

Color palette generator

netsi — Tue, 15 Nov 2011 14:24:19 +0000

http://www.cssdrive.com/imagepalette/index.php

This is a cool webapp where you upload an image and the colors from the image is converted into a number of colors.

That way you can extract tones and colors to use on a webdesign.

Printing HTML pages, make screen and print appear the same.

netsi — Thu, 07 Jul 2011 08:29:22 +0000

When using external stylesheets on a webpage you can specify which “media” it should apply to. For instance see these lines:

<link rel="stylesheet" href="Blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="Blueprint/print.css" type="text/css" media="print" />

As you might allready have guessed the screen.css will be choosen for screen (read: browser) and projection mode. When printing the print.css will be choosen if you print the webpage. So far so good.

Some times you will have a specific page for print, which say will render only a stripped down version of your content and prompt the user with a print dialogue (using a javascript window.print() line of code). But when you see the page in the browser you are in “screen” media, and the style shown will be as defined in the screen.css. You may confuse the user as he gets a screen version ready for print – and printing it wil result in a version based on the print.css. I have made a jQuery based fix for this situation.

The jQuery fix

The fix will disable any external stylesheets related to screen and make the print.css work on media types “all”. It is coded so that it will check for a “#print” added to the URL. So you should simply make the URL of the printversion have a “#print” in it. Here is the fix:

   1:  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.2.min.js">script>

2: