All your base are visible to us

by

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.

Advertisements

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.

    Walter

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s


%d bloggers like this: