All your base are visible to us


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:

  <title>Post Test Form</title>
    <base href="" />
    <base href="" />
    <base href="" />
    <base href="" />

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=""]: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.

One Response to “All your base are visible to us”

  1. Walter Says:

    Nice post. I was checking constantly this blog and
    I’m impressed! Extremely helpful info specifically the last part 🙂 I care for such info a lot. I was seeking this certain information for a long time. Thank you and best of luck.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: