Sometimes it truly is amazing what you can do in simply one line of code. This blog post here will be a place where I keep a list of truly amazing and powerful one liners that can do incredibly useful and powerful things.

JavaScript (and jQuery)

// All links starting with http will get a rel=nofollow attribute added, 
// but ignore any links that already have 'rel' attributes.

$('a:not([rel])[href^="http"]').attr('rel','nofollow')

Continue reading “Amazing one-liners”

The calc() function in CSS saved me today. If you need a table width to be 100% of a relative width container subtracted by a set number of pixels, you can do that like this.

.calculated-width {
    width: calc(100% - 100px);
}​

Some older (webkit/mozilla) browsers may also require you to use vendor prefixes so it will work on those user agents as well.

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

This is cool, but to be honest, calc() is just one of the many functions that are available in CSS3.

Other functions

You can also use the attr() function to display any attribute value from the currently selected element. This could have numerous valuable use cases.

a:after {
  content: " (" attr(href) ")";
}

Lastly, CSS3 also added the ability to create custom variables in CSS (declared by two dashes). It should be noted however that these do not work in Internet Explorer 11.

html {
  --myvariable: #F00;  
}

#div1 {
  background-color: var(--myvariable);
}

This is incredible. In CSS3 its possible to combine multiple CSS backgrounds together and/or even a gradient background too on the same element!

Let’s say you want to create a picture using two images and a gradient colored backdrop all together. First, lets create a container element in HTML.

<div id="photo"></div>

Traditionally you would write the CSS code with each background property on a separate line.

#photo {
    background-image: url("mike.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-image: linear-gradient(#eb01a5, #d13531);
}

However, this isn’t necessary. In CSS you can combine multiple properties all together using the shorthand background property, so you can apply all those values together, and multiple instances of values can be added in a comma-separated fashion.

#photo {
    background: url("mike.png") no-repeat center center, linear-gradient(#eb01a5, #d13531);
}

There is one limitation I am aware of. You cannot fade multiple backgrounds together (without using multiple divs) because you can’t change the opacity of a CSS background image. You can only alter the opacity of DOM elements.

Keep in mind that older versions of Internet Explorer do not support multiple backgrounds, and it will obey the rules of cascading order which dictate that when two properties of equal weight are present, the last one wins. And all code that cannot correctly be interpreted by the browser, is ignored.

You can find more information about this topic in this stackoverflow comment here.

https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element

Many organizations have a lot of non-HTML document files. Word docs, PDF files, Excel spreadsheets, Powerpoint presentations, and the list goes on.

This can be an annoying experience if the link surprisingly opens an Excel spreadsheet when the user didn’t expect that. And it’s even more obtrusive if they are browsing on a mobile device and this happens.

The solution

What we need to do is dynamically display the file type next to all such hyperlinks using CSS. We could manually insert text for this, but a dynamically inserted icon is a better solution. In the past this method has been called link markers, or CSS cues, but basically they are just file type indicators.

First, lets write some HTML for the various hyperlinks.

<p><a href="http://www.google.com" target="_blank">new window</a></p>

<p><a href="http://www.google.com">external site</a></p>

<p><a href="mailto:mike@donotreply.com">mailto: link</a></p>

<p><a href="file.pdf">pdf files</a></p>

<p><a href="file.doc">word documents</a></p>

<p><a href="file.xls">excel files</a></p>

Each of these links are just the very basic code that you would need to insert a hyperlink.

No classes are needed because CSS can select each of these links using sub-string matching attribute selectors, demonstrated below. We are only interested in the file name at the end of the URLs.

a[href $=".pdf"] { 
   padding-right: 18px;
   background: transparent url('images/icons/pdf.gif') center right no-repeat;
}

a[href $=".xls"] { 
   padding-right: 18px;
   background: transparent url('images/icons/xls.gif') center right no-repeat;
}

a[href $=".doc"] { 
   padding-right: 18px;
   background: transparent url('images/icons/doc.gif') center right no-repeat;
}


a[href ^="http://"] {
   padding-right: 20px;
   background: transparent url('images/icons/external.gif') center right no-repeat;
}

a[href ^="mailto:"] {
   padding-right: 20px;
   background: transparent url('images/icons/mailto.gif') top right no-repeat;
}

a[target="_blank"] {
   padding-right: 18px;
   background: transparent url('images/icons/newwin.gif') center right no-repeat;
}

The CSS code above basically detects the file extension at the end of the hyperlink in HTML, and adds just enough padding on the right side of the link to display a small background image icon that indicates the type of file before they click on it.

You can download a code sample right here.

The dollar sign ($) indicates the end of the string, and the upwards pointing arrow (^) indicates the beginning of a string.

You can also modify this CSS code (using media queries) so that it only displays these icons on mobile devices.