Welcome

Hi all, and welcome to my blog. Over the last year I was encouraged to blog on our intranet about work related stuff during my downtime. Not really the blogging type I gave it a shot anyway and my first post was about online editors I had found useful. Turns out no one had really used them before and thought it was a really handy post.

I decided to keep blogging about random pieces of information that I came across during work. I found myself going back to my own posts about techniques I had just learned and didn’t do them often enough to remember them off by heart.

This blog is a collection of those posts. It is really just a reference blog for myself, however I have made the posts live just in case someone finds them useful :)

Phone Numbers and iOS – CSS Debugging!

While working on the Marram redesign the client found a style inconsistency on his iPad (which wasnt one of the platforms we we’re testing on) that I just could not replicate anywhere else (I tried different browsers, older versions etc) so it was quite tricky trying to figure out what was happening.

iPads may have some sort of developer tools for Safari but I couldn’t look into it because I was borrowing iPads throughout the week from different people and didn’t want to end up changing their settings.

So I was pretty much making tweaks and refreshing the page to see what affected what.

The problem happened with the phone number which was sitting as part of the main navigation (but it was static and not clickable). My PC and its browsers were displaying the phone number fine but the iPad seemed to screw that part of the navigation up.

After numerous attempts at tweaking the styles and even tweaking the HTML I finally found out that the iPad was turning the phone number into a clickable link (most probably because if you were on an iPhone you could simply click the phone number and make a phone call – not sure why it does it on an iPad though).

I guess it makes sense that it does that but again it took me a while to figure that out! the phone number was part of the main navigation so it had picked up all the styling of the normal navigation items (like display:block; and padding etc).

I ended up styling the phone number into an actual link like so:

<a href="tel:5551234567">5551234567</a>

So if users on a PC click on that number they will get prompted to pick a program and then they could use Lync or Skype to make the call.

Vertical Align

Yesterday I was given the Suite splash page, a basic design with large text and a phone number, the problem? it was vertically aligned! I didn’t realise this was so hard till I tried to take a stab at it myself.

After some Googling and going through what felt like tons of ancient articles and old school techniques I finally found one that had minimal code and was easy to implement.

.center {
  width:300px;
  height:300px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-150px;
  margin-top:-150px;
}

The catch is that the element needs to have a fixed width/height.

Most of it is self explanatory. Without the negative margins your box will technically be centred but it will use the top left of your box as its point, that’s why you use negative margins to bring them in so that they’re aligned by the centre of your div

{box-sizing:border-box;} – The Box Model

We’ve all done it – set a fixed width on a div to say 200px, then later we need to add 10px padding and a 1px border, our div is now 222px wide.

Its a weird quirk but we’ve learnt to live with it.

I’m working on a SharePoint project at the moment and got stumped on a floating 3-step wizard type upload panel.

The panel is activated by a link in the main navigation, it operates like a click activated drop down menu. The problem was that the wizard needed to have padding, but also needed to be 100% wide.

Insert weird box model, what happened was that the padding added to the overall 100% width, meaning it would run off screen and would have caused horizontal scroll bars.

I tried a variety of different percentages, but no matter what, none of them sat flush to the edges of my screen, which means it could look worse on other peoples screen resolutions.

{box-sizing:border-box;} to the rescue! this is an amazing selector and I’ve heard about it before in the past, but have never had a use for it till now. Some people swear by it and think you should use it for all your elements. As great as it is, the browser support isn’t that great (IE8+ and Firefox still needs the -moz- prefix) and I think it should be used where needed. It works great with fluid layouts, or anything that uses percentages.

So what does it do? it basically gives you the box model you want. If you tell a div to be 200px wide then it’ll give you a 200px wide div regardless of the padding and borders you add.

Semantic Markup

I came across this site the other day: www.portlander.co.nz and was going through the site till I hit the Our Story page. I was looking at the nicely laid out ingredients list and thought it looked quite nice; there was an image a title and a description per ingredient.

Then I flicked over to the HTML and saw this:

<div class="ingredient_box">
  <img src="cow.jpg" class="ingredient_img">
  <h3>Angus Beef:</h3>
  <p>Our prime Angus, Aberdeen and Hereford beef...</p>
</div>

Each ingredient has its own div and inside the div it has an image, an h3 and a paragraph tag.

I was a bit disappointed, the markup could have been better. I guess in our industry there is no real right or wrong way of coding, everyone thinks differently and therefore codes differently, but code can always be improved and made more semantic.

What does semantic markup mean exactly? To define semantic:

“Relating to meaning in language or logic.”

So basically to sum it up, does your markup have any meaning?

If I disable the CSS and just get the plain old HTML does it still make sense?

Then it dawned on me: why was I disappointed? What did I expect to see? Does this layout have any meaning and how could I make it better?

Going through the list again I decided how I could make this have more meaning.

First things first: It’s a list, it’s stating all the ingredients with an image, a title and a description, but it could be more than that.

It could be a definition list <dl>. The definition term <dt> could be the title and the description could be the definition description <dd>.

The animal images could be turned into a sprite and added to the <dt>.

Again, I’d like to emphasise that there are no right or wrong ways of coding, but there’s always more semantic ways.

I would love feedback on this post! What are your thoughts on the current markup? Would you do something different? If so how?

CSS3: From Knowledgable to Ninja – Part 4 Media Queries

If you’ve ever used a print stylesheet you’ll be familiar with the idea of creating a separate stylesheet to come into play under certain conditions. in CSS2 there were media types, which lets you specify a type of media to target.

<link rel='stylesheet' type='text/css' media='screen' href='css/styles.css' />
<link rel='stylesheet' type='text/css' media='print' href='css/print.css' />
 
@media screen {
  p {font-family:sans-serif;}
}
@media print {
  p {font-family:serif;}
}

CSS3 Media Queries

In CSS3 they extend the idea but instead of targeting a media type they target the capability of the device. Such things it can target are:

  • width and height (of the browser window)
  • device width and height
  • orientation – for example is a phone in landscape or portrait mode?
  • resolution

creating and linking to a separate stylesheet

@media screen and (max-device-width:480px) {
  #wrapContent {width:400px;}
}

This style targets screen devices that have a max width of 480px (i.e. iPhones) to make #wrapContent 400px wide. for this to work we would need to place this at the end of our stylesheet so it will overwrite any styles we’ve set up for the browser.

If you’re going to have a lot more styles and want to use a separate stylesheet you can use the following.

<link rel='stylesheet' type='text/css' media='only screen and (max-width: 480px)' href='smartphone.css' />

CSS3: From Knowledgable to Ninja – Part 3 Generated Content

before and after

::before and ::after
before and after are pseudo-elements, essentially you get two free stylable faux elements for every non-empty element.

 
p:before {content:"before content - "; font-weight:bold;}
p:after {content:" - after content"; font-weight:bold;}

<p>the content</p>

before content - the content - after content

syntax

element:before {content:”REQUIRED”;}

Although the content declaration is required, the value can be empty. Below are the values the content declaration accepts.

 
element:before {
  content:'';                    /* empty */
  content:" (.pdf) ";            /* any text */
  content:"\2603";               /* unicode */
  content:" (" attr(href) ")";   /* attributes */
  content:counter(name);
  counter-increment:name;        /* counters */
}

special characters

Copy Paste Character is one example website with lots of characters you can copy, add this with an Entity Conversion Calculator and you’ve got the tools needed to make some generated content.

View the demo

attribute values

You could use this in the print style sheet, generating the URL for all links.

a[href^=http]:after {content:attr(href);}

There are a lot of clever ways you can use generated content. Some of the use cases I’ve seen are quote, speech bubbles and tooltips.

CSS3: From Knowledgable to Ninja – Part 2 Specificity

understanding specificity

ID
1-0-0

Class
0-1-0

Element
0-0-1

Estelle Weyl handed out a great reference guide to specificity or in this case speciFISHity where an ID is like a shark, a class is like a fish and an element is like plankton – literally Plankton from Spongebob Squarepants! inline styles are like the BP oil spill and !important blows them all out of the water.

The * selector, or global selector, has no value.

* {} 0-0-0

Combinators, like ~, >, and + have no value

ul li {} 0-0-2
ul > li {} 0-0-2

:not has no value, but parameter selector does

.myClass:not(p) {} 0-1-1

Specificity is not inheritance.

CSS3: From Knowledgable to Ninja – Part 1 Selectors, Pseudo Elements

Pseudo-classes select elements that already exist, pseudo-elements create ‘faux’ elements you can style. Pseudo-elements also use the double colon, this was introduced to distinguish the difference between puseudo-classes and pseudo-elements. all browsers recognise the single colon and I believe IE ignores the double colon, so its probably safter to use the single colon.

first letter and first line

::first-letter and ::first-line
Target the first letter/line of the specified selector.

p::first-letter {}
  <p>The first letter will look like a drop cap and this line will be styled</p>

selection

::selection

If you’ve ever used the HTML5 Boilerplate you may be familiar with this one, this pseudo-element lets you style the selection you make. By default on most browsers if you highlight something it’ll turn blue and the text colour will be white, Paul Irish one of the creators of the HTML5 Boilerplate has set his to a hot pink, so if you ever jump onto a site and see a hot pink highlight, chances are they’re using his boilerplate :D

*::selection {color:background-color; color:black;}
  <p>highlight anything and I'll be pink!</p>

before and after

::before and ::after
You can style the generated content with the ::before and ::after pseudo-elements. The ‘content’ property specifies what is inserted. I’ll talk more about these two pseudo-elements in the Generated Content post.

CSS3: From Knowledgable to Ninja – Part 1 Selectors, Structural Selectors

Structural selectors target elements based on their relationships to other elements in the DOM. They update dynamically if the page updates and they reduce the need for extra markup, classes and IDs.

First, last, & only

:first-child and :last-child
Target the first child/last child of its parent.

:first-of-type and :last-of-type and
Target the first/last of this type from its parent.

:only-child and :only-of-type
Target the element provided its the only/of-type element of its parent.

Its a lot easier to explain by playing with the demo, try all the selectors and try targeting the h2 and h3.

View the demo

nth pseudo-classes

:nth-child(n), :nth-last-child(n), :nth-of-type(n) and :nth-last-of-type(n)

The argument, n, can be a keyword, a number, or a number expression of the form an+b.

The keywords it accepts are odd and even – targetting odd or even-numbered elements.

When a number is entered into the argument for example 5 it will target the fifth element.

The argument n can also be given as an+b, where a and b are integers (for example, 3n+1).

In that expression the number b represents the position of the first element that we want to match (in this case the first position). the number a represents every element we want to match after that (in this case every third element after the first) so it will target the first, fourth, seventh and tenth.

View the demo

empty pseudo-class

:empty

The empty pseudo class targets elements that have no children at all.

<p></p>

<p> <!-- this is a comment --> </p>

<table>
  <tr>
    <td></td>
  </tr>
</table>

This can be useful for styling empty table cells, you could give them a greyed out look.

negation pseudo-class

:not(n)

Match all elements that do not match whats inbetween the parenthesis

li:not(.myClass) {color:red;}
  <ul>
    <li>one</li>
      <li class="myClass">two</li>
    <li>three</li>
  </ul>

target pseudo-class

:target

Target is used in conjunction with IDs and are matched when the current URL matches the ID.

#about:target {}
  <a href="#about>About Us</a>

A great example would be to make a tabbed area, where the tabs link to hash tags and you could style the target tab to look like the active tab.