Posts Tagged ‘css’

Inspect User Agent Styles in Firefox DevTools

Friday, June 6th, 2014

User agent styles refer to the styles loaded by the default stylesheets within a browser. Firefox has some basic style rules that get applied to every page – for instance, links are blue and <h1> tags are big and bold with margins.

Sometimes these styles can interact with the styles you add to a page, which is why it is important that you can see them in devtools. I recently added a feature in Firefox 32 (currently Nightly) that lets you inspect these rules. See Bug 935803 for the implementation details.

Within the inspector, these styles behave pretty much like any other style on the page. It lists rules in the order of application, and you can see which rules have been overridden. There are a few ways that devtools distinguishes between the UA styles and normal styles:

  1. They are not editable. Since you can’t change these files, you are not able to edit/disable them within the tools.
  2. They are shown with a slightly different background color.
  3. The links to the stylesheet open a popup window to view the source of a sheet instead of loading the sheet in the Style Editor. There isn’t much purpose for loading these in the style editor (see 1), but seeing the source of the sheet can still be nice for the curious.

user-agent-styles-usage

user-agent-styles-usage

Enabling User Agent Styles

This is turned off by default. To enable user agent styles, select the “Show Browser Styles” checkbox from the options panel:

user-agent-styles-option

user-agent-styles-option

You can open any page and toggle this feature on to see it. But here is a a quick page to try it with:
data:text/html,<blockquote style='color:red;' type=cite><pre _moz_quote=true>fun <a href='foo' style='color:orange'>to</a> inspect</pre></blockquote>

Gradient Generator

Wednesday, April 18th, 2012

I have been working a browser based gradient generator. I’ve never had the best experience using gradient generators, so I decided to see if I could do better.

It is a prototype right now (a weekend project), but I am hoping to do more with it as time permits.

Features

  • It outputs to CSS, Canvas, and SVG
  • Allows for separate color and alpha stops
  • Keyboard support (left, shift+left, right, shift+right, ctrl+c, ctrl+v)
  • You can Copy/Paste current stop
  • Undo/Redo
  • Easily sharable URLs with the hash tag Example gradient or a GET parameter (Example with GET parameter).
  • Local Storage Support to keep track of your work
  • Potential Future Features

    • Support for radial gradients
    • Cross browser CSS output
    • Saving your gradients to server
    • Multiple layers for stacked gradients
    • More CSS 3 effect generators (box shadows, rounded corners, etc) built into the UI
    • Any other ideas? Leave a comment or tweet them to @bgrins!

    I haven’t come up with a better name yet, so check it out here: http://briangrinstead.com/gradient!

    Gradient Generator Screenshot

Keep Aspect Ratio With HTML and CSS

Wednesday, September 28th, 2011

When working on my javascript colorpicker, one of the things I thought would be really cool is if you could resize it and have the colorpicker automatically respond to different widths. When I first made it, I had basically defined static widths with the thought that there could be different themes (small, normal, large) which defined different widths.

This turned out to be a pain, since you had to manually figure out what each width needed to be for the total size. To complicate things further, I wanted to have a different percentage width when accessing the colorpicker via an iPhone. I found that the hue slider was a little too small to accurately slide with the touch interface, so I wanted it to take up more of a percentage of the total width. I’m can be lazy about calculating widths in CSS, so I went off looking for a different way to do this.

Aspect Ratios

Why couldn’t I just use percentage widths? Because the left portion of the colorpicker needs to be a square – or else the gradients for saturation and value just look weird and don’t really map up 1:1. I did some searching and found a CSS workaround to keep the aspect ratio of a fluid element by ansciath. The meat of this trick is that according to the spec for margin-top, a percentage refers to the width of the containing block, not the height. This post got me much of the way there, but I had to include a couple of fixes for IE and ways.

The really nice part about using this technique is that it makes spectrum extremely easy to skin in your own CSS. Check out ColorStash for an example of this. Using media queries and max-widths, I can change the width of the colorpicker as the browser resizes to get some really responsive behavior on a UI control (colorpicker) that has typically been very static.

Demo

See the demo of the aspect ratio and media query. Try resizing your browser window to under 480px width to see the switch happen. Here is the full source code for the demo.

Below is a snippet showing the basic HTML/CSS needed for this technique:

<div class='container'>
    <div class='outer'>
        <div class='fill'></div>
        <div class='inner-top'>
            <div class='square'>Always a square</div>
            <div class='right'>% width</div>
        </div>
    </div>
    <div class='bottom'>
        Bottom
    </div>
</div>
.outer {
  position:relative; 
  width: 100%;
  display:inline-block;
}
.inner-top {
   position:absolute; top:0; left:0; bottom:0; right:0;
}
.square {    
    position: absolute;
    top:0;left:0;bottom:0;right:20%;
    background:orange; 
}
.right {
    position: absolute;
    top:0;right:0;bottom:0;left:83%;
    background: purple;
}
.fill { 
    *height: 80%;
    margin-top: 80%;  /* Same as square width */
}
@media (max-width: 480px) {
    .square { right: 51%; background: blue; }
    .right { left: 51%; }
    .fill { margin-top: 49%; } 
}

Create a hue slider with CSS gradients

Thursday, September 8th, 2011

Yes, That Is A Fancy Way Of Saying Rainbows

For most browsers, you can use the linear gradient vendor property with multiple color stops. In IE, the filter property does not support color stops, so we have to fake it with 6 divs, each with a single color stop gradient. It works in Internet Explorer, back to version 5.5.

I made this while working on my JavaScript colorpicker, Spectrum. Check out the hue slider gradient demo on jsfiddle, where you can play with the source.

#hue {
    height:200px;
    width: 40px;  
 
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
 
#ie-1 { 
    height:17%; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
#ie-2 { 
    height:16%; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
#ie-3 { 
    height:17%; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
#ie-4 { 
    height:17%; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
#ie-5 { 
    height:16%; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
#ie-6 { 
    height:17%; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

Not exactly pretty, but it is one way to get multiple color stops in Internet Explorer working.