Evan J Palmer's Blog

A blog about learning (code, improv, film and, anything else).

Month: March, 2013

Debuging CSS with JQuery and Chrome

I wouldn’t consider myself much of a front end dev. I’m more back end (I guess).

As a result, the following might be a common technique for working out problems with CSS.

Anywho, here it goes:

I debug and write my CSS with JQuery.

What I mean by that is this:

I’ve tried to apply a bunch of styling to some elements, but it hasn’t worked. The first thing I do is get the CSS selector and throw it into jquery in Chrome’s Developer Tools console. Did it find the right element(s)? If no, I mess around with the selector until it’s right, and put it back into the CSS. Job done.

If it DID find the correct elements, why is the style not being applied? I now add and remove attributes and styles in JQuery and see where that takes me. 

I use other techniques too, but that’s a good one.

Advertisements

Google Reader is down!

I am painfully disappointed to discover that Google is ditching Google Reader.

I absolutely love it, and feel like it’s be buried before it’s time.

This raises the question, what do people use to consume their feeds? How do people get their info. I have a suspicion that more and more people are filling this need with Twitter and Facebook, but for me it’s the permanance of Google Reader’s feed that I like. I can ensure I never miss a Hanselman Post, or a Mr Money Moustache – if I miss a tweet, however, it’s gone for good (kinda).

Oh well. Cheese gets moved. Life goes on.

Now to find a good alternative…

CSS selector for two classes on the same element (and hover)

...because the Fifth Element

This one wasn’t entirely obvious to me at first, so, why not throw a up a post about it.

If I have some HTML, and I want to apply a style to an element with two classes (rather than one), how do I select it? How do I then only select that when it’s parent has been hovered over?

HTML


<div class="image-box editable"><span class="edit-image">only show this on hover</span></div>
<div class="image-box"><span class="edit-image">This should always be shown</span></div>

CSS:

.image-box{
	border: 1px solid #000;
	height: 100px;
	width: 100px;
}

.image-box.editable .edit-image {
	display: none;
}

.image-box.editable:hover .edit-image {
	display: inline;
}

It’s pretty simple. Just select the first class you’re interested, in the usual way, with a period, then the second class, also with the period, but ensure there is no space between them.

Check it out in action here:

http://dabblet.com/gist/5148997