CSS Font-Size and Units of Length

units-percentage

The number of devices accessing the same data and the same page grows fast. Creating a modern web page that makes every device view the same content in a simplified and adjusted way can be a challenge.

In this post we are gonna see the font-size property and the units of length, which will help you to understand and to create a responsive web page.

How many units of length does exist?

There are a lot of units of length and they can be separated as relative length and absolute length.

Relative length: relative to another length property. Units: em, ex, ch, rem, vw, vh, vmin, vmax and %.

Absolute length: fixed and will appear as exactly that size. Units: cm, mm, in, px, pt and pc.

Main units

The main and more used units of length are: px, em and %.

PIXELS (PX): have a fixed size and don’t change. Ems are relative to the font size set in the CSS. If you are accessing on a screen with higher resolution, the fonts will be rendered smaller. It’s good and bad at the same time, just depends on what you need.

EM: don’t have a fixed size and can change. One good thing is that they are scalable, in other words, good for mobile web development. One “bad” or complicated thing is that they cascade, making the perfect pixel more difficult. For example: 1.2em of 16px = ~19.2px

PERCENT (%): don’t have a fixed size and can change. Very similar to EM unit, however using percentage. For example: 1.5em = 150%

Conclusion

These three kind of units are good to use in font-size property. You just need to adjust and to select the best for your project. Relative lengths can be a good choice for web development and for a responsive design. If you have never used other unit but pixels, try to use percentage, they are very good and it’s popularity is growing.

CSS Fade In Animation

fadeIn

Have you already used a css animation in your project? They can make your website looks much more refreshed and modern visually. Today we’re gonna create the fadeIn effect.

Let’s assume the following code:

In the code above, if you click on the Result tab, you will see that the page loads at once, without any effect. We want to create an effect that when the page is loaded, the element loads in a fade effect.

@keyframes and animation

First of all, we need to create our @keyframes from opacity 0 to 1.

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

Great, now we can create a class called fade-in and invoke our effect named fadeIn.

.fade-in {
  opacity: 0; // invisible from the start
  animation: fadeIn ease-in 1; // call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time
  animation-fill-mode: forwards; // this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)
  animation-duration: 1s;
  animation-delay: 0.3s; // delay to start
}

Now, you just need to put the class fade-in in the element that you want to create the effect. If you want to create this effect for all your content, you can apply it on the body tag.

To see the final result, click on the Result tab below. You could also take a look on the CSS tab, I added some codes for better compatibility.

Conclusion

These effects are very simple to implement and make your website looks modern and even in some cases faster. If you want to learn more about CSS animation, I would recommend https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Getting Started with Sass

sass-logo

Today I am going to talk about Sass and SCSS but there are others preprocessors available. For example: LESS.

Sass is a preprocessor that is interpreted into CSS. In practice it means you will write codes in Sass language and it will be converted into CSS. It helps you reduce repetition with your CSS.

Sass vs SCSS

Differences between Sass and SCSS. http://sass-lang.com/documentation/

Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “.sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Files in the indented syntax use the extension .sass.

Getting Started

I considered writing about how to install the Sass but everything you need you can find here: http://sass-lang.com/install

Finally, let’s write some code!

The first thing you need to know is that Sass allows you to use variables. It keeps your code much more organized.

SASS SYNTAX

$font-stack: Helvetica, sans-serif
$primary-color: #333
$font-small: 15px
$font-medium: 30px
$font-large: 60px
$blue: #186DEE
$grey: #E5E5E5

SCSS SYNTAX

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
$font-small: 15px;
$font-medium: 30px;
$font-large: 60px;
$blue: #186DEE;
$grey: #E5E5E5;

The second thing you need to know is that with Sass your code will be much more organized visually as well. Sass and SCSS are written in a visual hierarchy.

SASS SINTAX

.content
  padding: 20px
  background-color: $grey
  +border-radius(5px)

  &:hover
    background-color: $blue

  span
    display: block

  span.one
    font-size: $font-small

  span.two
    font-size: $font-medium

  span.three
    font-size: $font-large

SCSS SINTAX

.content {
  padding: 20px;
  background-color: $grey;
  @include border-radius(5px);

  &:hover {
    background-color: $blue;
  }

  span {
    display: block;
  }

  span.one {
    font-size: $font-small;
  }

  span.two {
    font-size: $font-medium;
  }

  span.three {
    font-size: $font-large;
  }
}

Note: in the code below we are using a mixin. But to use it, we need to create it. Otherwise our code will not compile.

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. http://sass-lang.com/guide

SASS SINTAX

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  -ms-border-radius: $radius
  border-radius: $radius

SCSS SINTAX

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

Conclusion

Writing codes in Sass or SCSS is really very simple and even if you have never seen them before, but you have a good knowledge of CSS, you will able to assimilate, understand and write codes.

If you want to practise and improve your skills, there are some online compilers and you can use them for free. Take a look at http://sassmeister.com/

There’s another good service if you don’t want to write your own mixins: here you can find a simple and lightweight mixin library for Sass. http://bourbon.io/

Working with images on a Retina Display

retina-display-images

Recently I bought a macbook pro with retina display and I realized that in some websites the images were appearing fuzzy and with low resolution. It occurs because the retina display contains more pixels in the same physical size, and a lot of websites are not prepared to it.

Pixels

Let’s assume the following code

<img src="image.png" width="100" height="100" />

The above HTML code will show us on the screen an image of 100px by 100px (CSS pixel) on a non-retina display while on a retina display is necessary an image of 200px by 200px to retain the same physical size.

pixel-density

Resizing Images

1. Single image with double size

Suppose we need to display an image of 100px by 100px in our website. To make it work well on a retina display we need an image of 200px by 200px and resize it using CSS.

.image{
  background-image: url(image@2x.png); /* image@2x.png = 200px by 200px */
  background-size: 100px 100px;
  height: 100px;
  width: 100px;
}

We could make it this way as well.

<img src="image@2x.png" width="100" height="100" />

Both work fine but there is best ways to do it. If you are using a non-retina display, why do you need to load a double size image? You don’t! Let’s see the next examples.

2. CSS: -webkit-image-set

This option is very useful and work well with image sprites. The browser is also smart enough to know which image should download. It means that who has retina display should spend more data usage.

.image{
  background-image: url(image.png);
  background-image: -webkit-image-set(url(image.png) 1x, url(image@2x.png) 2x);
  background-size: 100px 100px;
  height: 100px;
  width: 100px;
}

3. HTML: srcset

The srcset attribute on img is very similar to -webkit-image-set. On browsers without srcset support, the value of the src attribute will be used. On regular resolution displays, the 1x variant of the srcset will be used. On displays with 2 device pixels per CSS pixel, the 2x variant of the srcset will be used.

<img src="image.png" srcset="image.png 1x, image@2x.png 2x" />

4. Using JavaScript to replace all the images

Replace low resolution images with double resolution images can take a long time. We can use JavaScript to replace all images in a webpage. I’ve made my own script and worked like a charm.

(function(){

  if (window.devicePixelRatio > 1) {

    var images = document.getElementsByTagName("img");

    for(var i=0; i<images.length; i++) {

      images[i].width  = images[i].clientWidth;
      images[i].height  = images[i].clientHeight;
      images[i].src = images[i].src.replace(".", "@2x.");

    };

  };

})();

Network test

The test is very simple and basically we can say that who has a computer with a retina display is spending more data usage.

Non-retina display

network non-retina display

Retina display

network retina display

Conclusion

We have seen some ways on how to implement images with good definition on devices with retina displays. If you are a web designer or just want to improve your knowledge, I really recommend these techniques.

If you are working with icons, a good option is to use @font-faces instead of images. Today, there are many good quality icon fonts that can meet your requirements for website design.

Favicons also need to be in a better quality on a retina display. You can export a 32px version to make a favicon Retina ready.

Understanding CSS Combinators

Combinators

Have you already used the following combinator before?

div ~ p {
  background-color: skyblue;
}

We have just seen the general sibling selector and it can be very useful. Let’s check it out! There are four combinators in CSS3.

  • Descendant Selector
  • Child Selector
  • Adjacent Sibling Selector
  • General Sibling Selector CSS3

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element. The following example selects all p elements inside div elements:

div p {
  background-color: skyblue;
}
<article>
  <h1>Descendant Selector</h1>
  <div>
    <p>Descendant Selector 1</p>
    <p>Descendant Selector 2</p>
    <section>
      <p>Descendant Selector 3</p>
      <p>Descendant Selector 4</p>
    </section>
  </div>
  <p>Descendant Selector 5</p>
  <p>Descendant Selector 6</p>
</article>

Descendant Selector

Child Selector

The child selector selects all elements that are the immediate children of a specified element. The following example selects all p elements that are immediate children of a div element:

div > p {
  background-color: skyblue;
}
<article>
  <h1>Child Selector</h1>
  <div>
    <p>Child Selector 1</p>
    <p>Child Selector 2</p>
    <section>
      <p>Child Selector 3</p>
      <p>Child Selector 4</p>
    </section>
  </div>
  <p>Child Selector 5</p>
  <p>Child Selector 6</p>
</article>

Child Selector

Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and “adjacent” means “immediately following”. The following example selects all p elements that are placed immediately after div elements:

div + p {
  background-color: skyblue;
}
<article>
  <h1>Adjacent Sibling Selector</h1>
  <div>
    <p>Adjacent Sibling Selector 1</p>
    <p>Adjacent Sibling Selector 2</p>
    <section>
      <p>Adjacent Sibling Selector 3</p>
      <p>Adjacent Sibling Selector 4</p>
    </section>
  </div>
  <p>Adjacent Sibling Selector 5</p>
  <p>Adjacent Sibling Selector 6</p>
</article>

Adjacent Sibling Selector

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element. The following example selects all p elements that are siblings of div elements:

div ~ p {
  background-color: skyblue;
}
<article>
  <h1>General Sibling Selector</h1>
  <div>
    <p>General Sibling Selector 1</p>
    <p>General Sibling Selector 2</p>
    <section>
      <p>General Sibling Selector 3</p>
      <p>General Sibling Selector 4</p>
    </section>
  </div>
  <p>General Sibling Selector 5</p>
  <p>General Sibling Selector 6</p>
</article>

General Sibling Selector

Conclusion

If you are a new learner or just improving your CSS skills, you need to know that CSS Combinators are used all the time by front-end developers. We have just seen very basic examples and most of the times they are used just like that. But you can also make different combinations using all of them.