Here’s a little safety switch for utility web pages. I have a quick-n-dirty, static html file I use simply for submitting a form to test certain features of our site. I typically use this only in my local development but occasionally in other environments. I set it by un-commenting a desired <base> element like so:
<head> <title>Post Test Form</title> <!-- <base href="https://local.example.com/path/to/feature" /> <base href="http://qa.example.com/path/to/feature" /> <base href="http://production.example.com/path/to/feature" /> --> <base href="http://test.example.com/path/to/feature" /> …
This typically works well for me, but I have at times changed the ‘active’ base element and forgotten. If only the base element were rendered somewhere in the browser. I could reveal the base element with CSS (display: block), but the base element has no content, only an href attribute.
Generated content to the rescue:
/* first reveal the 'head', hide all the head's ancestor elements, un-hide the base element */
head {display:block;}
head * {display: none;}
head base {display: block;}
/* use a pseudo-class that enables generated content */
head base:after {
border: 1px solid ActiveBorder;
background-color: ActiveCaption;
color: CaptionText;
display: block;
/* display the value of the href attribute */
content: attr(href);
padding: 1ex;
font-family: monospace;
}
Now, the top of my static page has a block that displays the current ‘active’ base element. While I’m at it, how about one more little tweak to warn me when I’m in production?
head base[href="http://production.example.com/path/to/feature"]:after {
background-color: #FEE;
color: #F00;
font-weight: bold;
}
Now, my view into my base element will show bold and red if I’ve un-commented the production base element.
