Category Archives: CSS

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.

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 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.

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

UI pseudo-classes

:enabled and :disabled
These pseudo-classes can be great for form usability, enabling and disabling form elements based on what the visitor has already filled out.

:checked
Target the element when it has been checked i.e. radio button and checkboxes.

 
input[type=checkbox]:checked + label {color:red;}
  <input type="checkbox" id="test1ck">
  <label for="test1ck">Check and Uncheck Me</label>

Form related UI pseudo-classes

All of the following pseudo-classes should be self explanatory :)

:valid and :invalid
:required and :optional
:in-range and :out-of-range
:read-only and :read-write
:default

<div>
  <input type="number" min="5" max="7" id="test3ck" required="required">
  <label for="test3ck">Number between 5 and 7</label>
<input type="color" pattern="#[a-fA-F0-9]{6}" id="test4ck"> <label for="test4ck">Hexidecimal color</label> </div>​

View the demo (currently best viewed in Chrome)

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

Older Attribute Selectors

E[attr]
Element E that has the attribute attr with any value.

img[alt] {}
  <img src="image.jpg" alt="accessible" title="accessible">

form[type] {} 
  <input type="date">

E[attr=”val”]
Element E that has the attribute attr with the exact, case-sensitive if attribute is case sensitive, value val.

img[src="small.gif"] {}
  <img src="small.gif" alt="small">

input[type="text"] {}
  <input name="firstname" type="text">

E[attr|=val]
Element E whose attribute attr has a value val or begins with val- (“val” plus “-“).

p[lang|="en"] {}
  <p lang="en-uk">This paragraph is set to en-uk</p>

img[title|="small"] {}
  <img src="small.gif" title="small-thumbnail">

E[attr~=val]
Element E whose attribute attr has within its value the space-separated full word val.

a[title~=more] {}
  <a href="#" title="want more info about this?">more ></a>

CSS3 Attribute Selectors

E[attr^=val]
Element E whose attribute attr starts with the value val.

a[href^=mailto] {background-image:url(emailicon.gif);}
  <a href="mailto:example@example">example@example.com</a>

E[attr$=val]
Element E whose attribute attr ends in val.

a[href$=pdf] {background-image:url('pdficon.gif');}
  <a href="flyer.pdf">Information Flyer</a>

E[attr*=val]
Element E whose attribute attr matches val anywhere within the attribute. Similar to E[attr~=val] above, except the val can be part of a word.

NOTE: You can use multiple attributes!! e.g. a[title][href] {}

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

ul li descendant selector
You all know about the descendant selector which targets all the nested <li>s

ol > li child selector
This also should be something you’re familiar with, this will match <li>s in <ol> but not the nested <ul>

li.myClass + li adjacent sibling
Targets the <li> that immediately follows <li>

li.myClass ~ li general sibling selector
Heres a new one I havent seen before, it matches later siblings, but not nested. (works in IE7+)