Mar 12 2012

CSS Specificity

CSS Specificity comes into play if you have two or more conflicting CSS rules around the same element. There are some basic rules and formula that a typical browser will follow to determine which one is most specific.

If the selectors are the same then the latest one will always take precedence. For example:

a { color: black; }
a { color: white; }

Typically this only happens by accident, and developers usually don’t knowingly add two of the same selectors. Conflicts legitimately come up when you have nested selectors however. Example:

p a { color: black; }
a { color: white; }

In this case you might think that a elements within a p element would be black, but they would actually be colored white due to the specificity of the first selector. In short the more specific a selector, the more preference it will be given when it comes to conflicting styles.

The specificity of a group of nested selectors takes some calculating. You would give every id selector (“#example”) a value of 100, every class selector (“.example”) a value of 10 and every HTML selector (“example”) a value of 1. Adding them up now gives you the specificity value of that style.

  • a has a specificity of 1 (1 HTML selector)
  • p a has a specificity of 2 (2 HTML selectors – 1+1)
  • .example has a specificity of 10 (1 class selector)
  • p a.example has a specificity of 12 (2 HTML selectors and 1 class selector – 1+1+10)
  • #example has a specificity of 100 (1 id selector)
  • body #content .example p has a specificity of 112 (1 HTML selector, 1 id selector, 1 class selector and 1 HTML selector – 1+100+10+1)

By pjkarlik • CSS, Front-End •

Feb 9 2012

Military History

Instagram Photo

By pjkarlik • Instagram, Photo •

Jan 29 2012

Mid Winter Hall

Instagram Photo

By pjkarlik • Instagram, Photo •

Jan 20 2012

Ogilvie Train Station

Instagram Photo

By pjkarlik • Instagram, Photo • 0

Jan 20 2012

Winter Frost

Instagram Photo

By pjkarlik • Instagram, Photo •

Jan 14 2012

Arduino OLED Library

Arduino is an open source hardware platform that allows designers, developers, and anyone to create amazing things with a little bit of electronic know-how.

4D-Systems make a line of small OLED Display screens that work great with the Arduino. I created my own Arduino 4D Systems OLED Library for this piece of hardware though. This Library would help me, and anyone else looking to harness the power of these small OLED screens. It covers all the primary screen drawing functions, placing text and doing SD memory card operations. Once added and compiled in your Arduino IED you can initialize

OLED myOLED = OLED(7,8,2500,57600);
myOLED.DrawLine(ax, ay, bx, by, color );

What’s been really cool now is seeing that other people are using it and developing from this base. The link below is to my github repository as well as someones cleaver use of my library to make a small Oscilloscope.


Oscilloscope for Arduino & 4D-Graphics controller

By pjkarlik • Project • 0

Jan 14 2012

OLED Screen Display

Instagram Photo

By pjkarlik • Instagram, Photo •

Jan 14 2012

OLED Screen

Instagram Photo

By pjkarlik • Instagram, Photo •

Jan 9 2012

CSS Animation with jQuery – jAnimate

This is a simple jQuery plugin that animates the Background property of a CSS Class. It’s set up to be pretty versatile, and with some understanding of jQuery configurable for any situation. Try it below, the UFO is using a four frame CSS sprite image with the jAnimate script applied.

ufoufo

a.ufo{
     background:url(images/ufo.gif) 0px 0px no-repeat;
     display:block;
     height:125px;
     margin:0px 10px 0px 0px;
     overflow:hidden;
     width:125px;
}

The CSS sets our initial properties of the animating object including sprite size, image URL and other presentation properties as we see fit. With a CSS Sprite based image the jQuery function now moves our background set at 0px top and 0px left by 125 pixels. Doing this fast enough creates an illusion known as persistence of vision or POV.

$('.ufo').jAnimate({
     'frameSize':'125',
     'frames':'4',
     'speed':'90',
     'style':'h',
     'repeat':'loop'
});

Using jQuery we jump x pixels either vertically or horizontally to the next frame based on the initialization call. When calling the function the plugin will find all elements with the .ufo class and add the mouseover & mouseout events and attach the animation script to that element. You also have a few optional parameters to determine if your CSS Sprite is tiled vertically or horizontally (‘style’:'h’) and if it loops or bounces from start to finish (‘repeat’:'loop’).

Check out the full source code at http://github.com/pjkarlik/jAnimate.

By pjkarlik • Front-End • 0

Jan 2 2012

Welcome to byte-mechanic

Hi there, my name is Paul J Karlik and I am a Front-End Developer and Manager working in downtown Chicago. This site is both my personal and professional blog about my work, hobbies and everything else that I like to do.

By pjkarlik • Blog • 0

Nov 28 2011

Paul Karlik

Instagram Photo

By pjkarlik • Instagram, Photo •