CSS Notifications, Hidden Form Posts & more in Week #4

CSS

Notification Message Elements – Without the icon graphic

However you choose to style your info, warning, error or success message boxes, there’s usually a representative icon that goes with it. You can save some bandwidth, reduce your markup and create generally more responsive notification elements by substituting the icon graphic with a well-styled text character.

In the example below, I’m leveraging the :before pseudo-selector to drop a styled exclamation point before the error message.

.error-message:before { 
    content: '!'; 
    display: block; 
    float: left; 
    padding: 0 12px; 
    font-size: 1.25em; 
    color: #fff; 
    line-height: 1.5em; 
    border: 1px solid #800; 
    border-radius: 24px; 
    background: #a00; 
}

JavaScript

Posting forms to hidden iFrames

This week, I had the need to post data to two different “endpoints”, from the same form submission. My first thought was to use JavaScript to post the form, but you get cross-domain issues.

I then decided to create two separate forms and target the submission of the second form to a hidden iFrame.

This sounds both sketchy and unnecessary, but believe me, the reasons were both legit and definitely necessary. Either way, this worked out well and stays transparent to the user. Maybe this will be a useful trick to someone out there.

<iframe name="post_target" width="1" height="1"></iframe>
<form action="http://mysite.com/action" id="myform" 
      method="post" target="post_target">
...
</form>

<script type="text/javascript">
$('#someelement').click(function() {
  $('#myform').submit();
});
</script>

Removing extended characters with RegEx

I was using Node.js to parse an RSS feed today and realized that many of the unicode characters in the feed weren’t available in the font I was using. The simplest solution was to use a Regular Expression to remove all extended ASCII characters. This solution worked well for me:

myString = myString.replace(/[^\x20-\x7E]/g, '');

HTML

Using HTML Comments to kill white space while maintaining readability

White space between list elements causes an annoying browser inconsistency where margins are introduced that are difficult to control. In the past, I have simply removed all line breaks in the code, making it very hard to maintain the list.

I just picked up this type today from Mr. Thomas at http://blog.sathomas.me/post/tracking-progress-in-pure-css

<ol class="track-progress" data-steps="3">
   <li class="done">
     <span>Step 1</span>
   </li><!--
   --><li class="done">
     <span>Step 2</span>
   </li><!--
   --><li>
     <span>Step 3</span>
   </li>
</ol>

SEO

Adobe Reader, get outta my search indexing!

A couple days ago, I found out that one of the sites I maintain actually had the usual “Adobe Reader is required to view PDF files” text within the Google search results for a page.

Frantically trying to make sure this never happens again, I replaced the content with this little image. If you try to host this image from my site, on your server, I might surprise you one day by changing it to a picture of a Nick Nolte. Crap, now Nick Nolte will no doubt be a primary keyword for this page.

CSS