14. May 2013

How to debug :hover pseudo class in Google Chrome Developer tool

Google Chrome developer tool is simply one of the best tools available for debugging of HTML5 applications.

It has one neat feature: possibility to inspect CSS of element and editing it on the fly.

That works fine for normal styles, but what about :hover state?

There is one “hidden” option which allows to switch element to :hover state.

Inspect element of HTML. You should see Styles on the right hand side. There are 3 icons. Click the middle one with arrow sign. It will pop up menu with checkboxes. You can select here CSS pseudo classes like :active, :focus, :hover or :visited.

google-chrome-dev-hover

To learn more about capabilities of Google Chrome developer tools I recommend to go through free course Discover Dev Tools from Codeschool.com.

6. May 2011

HTML5 API – File.slice changed

Firefox and Google Chrome implemented File API for manipulating with files. It contained very usefulĀ function slice.

Slice allowed you to read part of file content. This was quite handy when dealing with big files.

Poorly chosen name for API function caused split in browsers unity. Here is explanation:

This method was removed in Gecko 5.0 (Firefox 5.0) because its syntax differs from that of Array.slice() and String.slice(). Work is ongoing on standardizing its replacement, but for now you can use the mozSlice() method on Gecko-based browsers.

Nice.

Method was replaced by:

  • mozSlice – in Firefox
  • webkitSlice – in Google Chrome

There is one important difference in the second parameter of function:

  • In case of slice it was length of block that should be loaded.
  • In case of *Slice it is the end position of block (length + start position).