Debugging CSS

A presentation at Wordcamp Vancouver in August 2015 in Vancouver, BC, Canada by Stephanie Hobson

Slide 1

Slide 1

CSS can be really frustrating.

Slide 2

Slide 2

Debugging CSS

Slide 3

Slide 3

The oldest written record of the word bug in the English language is in a Shakespeare play. In Shakespeare’s time bugs didn’t have 6 legs and skitter around on the ground. Shakespeare’s bugs were boogs, bogles, or bogged - they were evils spirits, imaginary monsters, or boogey men.

Slide 4

Slide 4

In Henry the Sixth, Edward the 4th struggles with bugs of his own. Standing over his wounded enemy, Warwick, he declares: “So, lie thou there. Die thou; and die our fear; For Warwick was a bug that fear'd us all.”

Edward is saying, with Warwick wounded they don’t need to fear him any more. Then, in typical Shakespeare fashion makes he a pun - saying at once that Warwick was a bug that everyone feared and now, wounded, it’s his turn to fear everyone.

-https://www.flickr.com/photos/60179301@N00/6370262361

Slide 5

Slide 5

In 1889 when Thomas Edison told a newspaper reporter that he had been up all night looking for bugs in his Phonograph it’s not hard to imagine he was searching for evil spirits looking, like wise, to vanquish the boogeyman from his machine. Though, by this time, bug was also a common term for insects and it’s hard to know which meaning Edison was drawing on. Edison used the term bug in a way that suggests it was already a common part of engineering jargon in his time and he defined bugs to a friend as “little faults and difficulties”. The term was still in common use when WWII rolled around with engineers working out bugs in everything from airplane engines to radar electronics.

https://en.wikipedia.org/wiki/War_of_Currents#/media/File:Edison.jpg

Slide 6

Slide 6

That’s likely where Rear Admiral Grace Hopper and her team first learned the term. So, it’s not hard to imagine their laughter when they traced a bug in the Mark II Computer they were working on to a moth trapped in one of the relays.

https://en.wikipedia.org/wiki/Grace_Hopper#/media/File:Commodore_Grace_M._Hopper,USN%28covered%29.jpg

Slide 7

Slide 7

They, I imagine somewhat gleefully, tapped the moth into their log book, declaring it to be the, “first actual case of bug being found,” and so the term made the jump from engineering to computing. All this to say that: when you’re fighting bugs in your CSS, you’re participating in a long and proud tradition.

https://en.wikipedia.org/wiki/Software_bug#/media/File:H96566k.jpg

Slide 8

Slide 8

Debugging CSS

Slide 9

Slide 9

Is the HTML valid?

• validator.w3.org

Slide 10

Slide 10

Is the CSS valid?

• csslint.net • jigsaw.w3.org/css-validator

Slide 11

Slide 11

Is the right CSS being applied?

• Is what you typed being applied? • Is other stuff being applied? • Is what's being applied right?

• Inspect styles with dev tools • Inspect box model with dev tools • Disable browser add-ons

Slide 12

Slide 12

Does CSS support what you’re doing ?

• Read the specs (don’t read the specs) • Mozilla Developer Network (MDN) • Search for the problem • Stack Overflow • SitePoint • CSS Tricks • MDN

Slide 13

Slide 13

Does the browser support it?

• caniuse.com • MDN

Slide 14

Slide 14

Can you isolate the problem?

• Take things away until it works • Start with nothing, add things until it stops working • codepen.io or jsfiddle.net • Search for the wacky combination of circumstances that cause the problem

Slide 15

Slide 15

Ask for help

• Stack Overflow

Slide 16

Slide 16

Steps to Debug

  1. Is the HTML valid?
  2. Is the CSS valid?
  3. Is the right CSS being applied?
  4. Does CSS support what you’re doing?
  5. Does the browser support it?
  6. Can you isolate the problem?
  7. Ask for help

Slide 17

Slide 17

When your code isn’t working, especially when you’re new to the language, not understanding what’s going on can make you feel really stupid. I’ve been doing this for 10 years and I can tell you this feeling never goes away. And the reason it never goes away is that it’s not true. Not understanding don’t make you stupid - it means you’re learning something, or you need another cup of coffee, or you’re doing something no one has ever done before. Everyone in this industry debugs code every day, even the best of us misplace semi-colons. I have a friend who has literally written the book on HTML and CSS and yesterday he confessed to me that he has looked thing up in his own book. So, don’t give the bugs, these imaginary monsters, this power over you.

The next time you are hunting for the evil spirits in your code base I hope that instead of fearing the bugs you can make make the bugs fear you!

Slide 18

Slide 18

Thank You

Stephanie Hobson stephaniehobson.ca @stephaniehobson

Slide 19

Slide 19

Tools for Debugging

• Developer tools • W3C validators • csslint.net • caniuse.com • MDN • Stack Overflow • codepen.io / jsfiddle.net

Slide 20

Slide 20

Search Tipes

• Find trustworthy resources • MDN, SitePoint • Search these sites by including their names in the search query • Add ‘CSS’ to your search • Use the right vocabulary