What is WebKit and how is it related to CSS?

More recently, I have been seeing questions with the tag “webkit”. Such questions usually tend to be web-based questions relating to CSS, jQuery, layouts, cross-browers compatibility issues, etc… So what is this “webkit” and how does it relate to CSS? I have also noticed a lot of -webkit-… properties in the source code for various … Read more

Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #c2d2e4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0a4c95; } How can I do the same thing in Firefox? I know I can easily do … Read more

WebKit issues with event.layerX and event.layerY

I just noticed that I get tons of deprecated warnings in the latest (canary) build of Chrome. event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future. Looks like jQuery is screwing thing up. I’m using: jquery-1.6.1.min.js. Would it help to upgrade to the latest … Read more

CSS transition shorthand with multiple properties?

I can’t seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn’t do anything: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: height .5s, opacity .5s .5s; height: 0; opacity: 0; overflow: 0; } .element.show { … Read more

Javascript / Chrome – How to copy an object from the webkit inspector as code

I am doing a console.log statement in my javascript in order to log a javascript object. I’m wondering if there’s a way, once that’s done – to copy that object as javascript code. What I’m trying to do is convert an object that was created using ajax to parse an xml feed into a static … Read more

How to remove the border highlight on an input text element

When an HTML element is ‘focused’ (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <input type=”text” name=”user” class=”middle” id=”user” tabindex=”1″ /> Firefox does not seem to do this, or at least, … Read more