Resize Elements with CSS3

The CSS3-spec is full of wonderful things. Sometimes things that are not so desperately needed as others but anyway… good to have them.

One of these more or less needed properties might be resize. It is part of the CSS3 Basic User Interface Module. What is really useful with resize is the ability to restrict the resizing of textarea for example. But it is possible to resize every element you’d like to as this demo by Simurai shows.

There are four values for resize that are kinda logical:

  • none: no resizing at all
  • horizontal: resizing only horizontal
  • vertical: resizing only… vertical
  • both: yeah, well… pretty obvious, right?!

Robert Nyman created this demo using the resize-property. You should also check out Louis’ article that’s pretty great. And: the MDN docs about resize. You can also read more about this topic at Stackoverflow.

Wo sind meine abgerundeten Ecken?

Sorry for this german post. For more information on this topic please check out the post “Where Are My Rounded Corners?”. Thanks to Daniel and Steffen at /gebrüderheitz.

Manchmal sind unsere Kunden verwirrt, wenn sie sich ihre neue Website im Browser anschauen und sie anders aussieht, als das Design, dass sie freigegeben hatten. In diesem Merkblatt erklären wir, warum es viele Vorteile gibt, diese Unterschiede zu akzeptieren und dass diese Vorteile die Nachteile überwiegen.

Lange Zeit haben wir die Gestaltung von Websites so gehandhabt, als ob es Printmedien seien. Hier findet nun ein Umdenken statt, denn das Internet unterscheidet sich sehr stark von den Printmedien.

Webentwickler haben lange versucht, den spezifischen Charakteristiken einzelner Browser entgegen zu wirken, indem sie Browser “zwangen”, die Website möglichst gleich dazustellen. Zum Beispiel ist es möglich, auch im Internet Explorer 7 oder 8 abgerundete Ecken darzustellen, damit sind jedoch andere Nachteile verbunden.

Es hat viele Vorteile, wenn man akzeptiert, dass das Internet sich anders als Printmedien verhält. Unserer Meinung nach sind das folgende:

#1 Mehr Zeit für das Wesentliche.

Feinheiten im Design wie abgerundete Ecken, Verläufe und Schlagschatten in älteren Browsern wie dem Internet Explorer 7 oder 8 umzusetzen, ist zeitaufwändig und teuer.
Bei Projekten mit limitiertem Budget und knapper Zeit ist es oft besser, die Zeit in wichtigere Bereichen zu investieren, wie zum Beispiel in das Verständnis von Geschäftszielen oder in Benutzertests. Zeit mit kleinen ästhetischen Details auf Kosten der wichtigeren Ziele zu vergeuden, kann den Erfolg der Website negativ beeinflussen.

#2 Steigende Userzahlen.

Zu viel Zeit in die Optimierung der Darstellung auf älteren Browsern wie Internet Explorer 7 oder 8 zu investieren ist kontraproduktiv, da diese Browser von leistungsfähigeren Versionen (wie beispielsweise Internet Explorer 9) ersetzt werden, die dann auch diese visuellen Verbesserungen unterstützen. Warum also Geld in einen schwindenden Markt investieren, wenn Sie ein zukunftssicheres Design für die nächste Generation von Browsern erstellen können?

#3 Bessere Leistungsfähigkeit der Website.

Eine Website in allen Browsern bis ins Detail gleich darzustellen, bedeutet, dass sehr viel mehr Bilder und auch Programmcode in die Website einzubinden sind. Dadurch wird die Ladezeit der Seite erhöht.
In einer Welt mit ungeduldigen Nutzern ist es wichtig, dass die Ladezeit möglichst kurz ist.

#4 Bessere Platzierung in Suchmaschinen.

Google weiß, dass Nutzer schnelle Webseiten bevorzugen. Deshalb beziehen sie die Größe einer Website in den Suchalgorithmus mit ein. Wenn die Ladezeit der Website kurz ist, wird sie im Lauf der Zeit bei Suchmaschinen besser gelistet. Aufgeblasener Code zur Anpassung älterer Browserversionen verhindert dies.

#5 Eine zukunftssichere Website.

Eine Website nicht in erster Linie für ältere Browser zu gestalten, stellt auch die Zukunftsfähigkeit der Website sicher. Wir Webdesigner wissen in welche Richtung sich die Browserunterstützung entwickelt und wollen unseren Kunden daher eine Website gestalten, die der Zukunft Stand hält. Programmcode für alte Browser, wie dem Internet Explorer 7 und 8 birgt das Risiko, dass Ihre Seite in neuen Browserversionen nicht funktionieren könnte.

#6 Einfachere Instandhaltung & Aktualisierung

Ein sauberer und schlanker Programmcode vereinfacht Anpassungen der Website. Programmcode, der für ältere Browser erstellt wurde, kann hierbei allerdings Kopfzerbrechen bereiten. Stellen Sie sich vor, Sie möchten die Farbpalette Ihrer Website ändern. Wenn Ihre Website abgerundete Ecken für den Internet Explorer 7 oder 8 unterstützt, bedeutet dies, dass viele Grafiken farblich angepasst werden müssen. Das ist zeitaufwendig und teuer.
Wurde Ihre Seite allerdings mit dem Fokus auf aktuellen Technologien gelegt, ist dies ein Aufwand von wenigen Minuten.

#7 Mehr Gestaltungsmöglichkeiten.

Zu guter Letzt sind manche Designansätze gar nicht in älteren Browsern umsetzbar. Internet Explorer 7 und 8 können manche Designs nicht darstellen, die in fortschrittlicheren Browsern sehr gut aussehen werden.

#8 Wird die Zielgruppe damit umgehen können?

Auf jeden Fall! Zunächst einmal nutzen viele User fortschrittlichere Browser wie
Internet Explorer 9 oder Google Chrome. Wie auch immer: Viel wichtiger ist, dass die Website auch in Internet Explorer 7 und 8 einigermaßen gut aussieht. Die Chancen sind gut, dass die Besucher der Website gar nicht bemerken, dass einige Feinheiten im Design fehlen, weil sie die Website niemals in einem anderen Browser öffnen werden. Wahrscheinlicher ist, dass Kritik von Kollegen geäußert wird, die das Design überprüfen. Dabei ist wichtig zu bedenken, dass die Kollegen wahrscheinlich nicht Ihrer Zielgruppe angehören.

Wir glauben, dass die Vorteile überwiegen, wenn kleine ästhetische Unterschiede für einen kleinen Kreis von Benutzern zugelassen werden. Wir denken heute schon an die Zukunft. Tuen Sie dies auch.

Disclaimer

Dies ist eine Übersetzung des Hefts “Where Are My Rounded Corners” von Paul Boag.
Gefunden bei Paul Irish

Credits: Paul Boag for Headscape

Download

Feel free to use this text and share it with your customers and other web-developers that suffer under the same issues.
English Version    German Version

“Where Are My Rounded Corners?” – German Translation

Some weeks ago Paul Irish published his article about TAFEE (Tiered, Adaptive Front-end Experiences) and shares Paul Boag’s booklet called “Where are my rounded corners?” which tries to describe why it is better to design for the future and modern browsers and not spending too much time trying to get the website’s design working in older browsers (namely Internet Explorer 7 and 8).

The booklet was originally published in Paul Boag’s blog. Paul describes why he did this this:

One of the biggest areas of confusion among our clients is progressive enhancement. They wonder why the beautiful design they signed off doesn’t look the same in older browsers. To overcome this problem we are making two changes. First, we are trying wherever possible to show them designs in the browser rather than as static images. Second, I have put together a short document outlining why progressive enhancement is ultimately better for their site.

Translation

As we have the same issues with customers that do not understand why they get different experiences of their websites in different browsers, we translated this beautiful booklet to German and want to share it with anyone who needs it under Creative Comments Licence.

Thanks goes out to Paul Boag for creating this, Steffen and Daniel who helped me translating it, and /gebrüderheitz (especially Daniel again) for the Design of the German version.

If you find mistakes or have a suggestion for a better translation please share it in the comments.
If you are interested in translating it to another language, please let me know via the contact-form or an email.

Download

As I said, feel free to download the pdf-file and share it with your customers as well.
English Version    German Version    Danish Version

Update 03.02.2012: Niels Steinmeier has a Danish version of this booklet. I don’t understand a word but it may help the one or the other.

CSS3: Rotate Images on Click

With CSS3 be get some great new functions to use that are now accessible pretty easy. These are not only rounded corners or shadows but also transitions and full animations that let you do things that were only possible with JavaScript some time ago.

In the footer of this website I use CSS3 3D-transitions for rotating two images. There is a front- and a back-site for that image. Through animation on click it looks like these images are rotating.
I’m not the first one using this technique. I got inspired by Google+. They are using it for rotation of the profile-picture but in another way with JS.

So… Let’s start this little tutorial. We will be do all the stuff with pure CSS which is a bit tricky and – as you may guess – this will not work with all of the browsers that are in use. But let’s take a look.

HTML

What the HTML will look like:

<div class="animate-wrap">
  <input type="radio" id="ani-1" name="animation" checked="true">
  <input type="radio" id="ani-2" name="animation">
 
  <div class="animate">
    <label for="ani-2" class="front">
      <img src="http://drublic.de/archive/wp-content/uploads/2011/10/rotate-images.jpg" width="220" height="220" alt="A photo of me.">
    </label>
 
    <label for="ani-1" class="back">
      <img src="http://drublic.de/archive/wp-content/uploads/2011/10/rotate-images-2.jpg" width="220" height="220" alt="Another photo of me.">
    </label>
  </div>
</div>

You may wonder why there are those two radio-buttons and labels included in the markup. Well, let me explain this: When you click on a label, the radio-button with the ID defined in the for-attribute will be activated. With CSS we can then define rules relaying on the :checked pseudo-class.

Chris Coyier also used this technique to build CSS-only tabs. In this article you will find some more information about how and why to use radio-buttons for this approach. Chris also wrote down pros and cons, stuff you should consider and so on.

CSS

As I wrote, the idea of flipping images with CSS is not exactly what you would call new. So to get the CSS-part of it you can also visit this nice demo-page and check out the source code on Github.

Mh, now let’s have a look at the CSS. One thing should be pretty obvious: We are using CSS3 for this tutorial, so there are some issues with vendor-prefixes. At the time of writing it will only work in Webkit-browsers as this is the only engine which supports 3D transforms for some time now. As mentioned by Daniel Baron on Twitter today the nightlies of Firefox will support it too. I checked on Firefox 10.0a1 (FF Nightly as of today) and it works like a charm.
Anyway: we will find a way to make it look ok in all of the browsers.

/* Wrapper */
.animate-wrap {
  position: relative;
  width: 220px; height: 220px;
  background-color: #aaa;
  -webkit-perspective: 1000;
     -moz-perspective: 1000;
          perspective: 1000;
}
 
/* Inputs */
.animate-wrap input {
  display: none;
}
.animate-wrap [type="radio"]:checked + .animate {
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
 
/* Image-Wrapper */
.animate {
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}
 
/* Labels */
label {
  position: absolute; top: 0; left: 0; z-index: 2;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
          backface-visibility: hidden;
}
 
.back {
  -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.front {
  z-index: 1;
}

Let’s break this down: First of all we have the styles for the wrapper. The important bit here is the perspective-keyword. As the name it self indicates it adds some perspective to the animated items.

Input-fields are hidden. By detecting which input-field is checked we start the animation by adding transform with a value of rotateY(180deg) to the label that is supposed to be animated. This indicates that the element will be rotated around the Y-axis or as the spec describes it

rotateY(<angle>) specifies a clockwise rotation by the given angle about the Y axis.

Another important bit that keeps the animation running like it shout is the transform-style-property which defines that the animation should be performed in a 3D-context via the value preserve-3d.

You will get a nice overview of these attributes named here by reading this article about how to animate a 3D-cube with CSS.

In order to prevent a kind of flashing while the animation takes place I added the backface-visibility property.

JS

We are finished with the CSS3 3D-transforms now. But we want to have some more browser-compatibility I think. Therefore we will add some JavaScript to the code which adds and removes a class front to the image that should be displayed.

if (!Modernizr.csstransforms3d) {
  $('label').click(function() {
    $('.animate .front').removeClass('front');
    $(this).addClass('front');
  });
}

As you can see the JS-snipped uses Modernizr to detect if CSS3 3D-transform are supported or not. If not JavaScript listens to the clicks on label elements and adds a class to the clicked one while removing the “old” one. This snipped is depending on jQuery as I personally use it for like every page I’m doing. But there are ways to do it without any library… You’re smart, you know that.

So… looks like we’re done here. If you have something to change for this little tutorial, please let me know in the comments or via email.

Download the files       Demonstration

Touch-Icons for Android-Devices: Y U No Working?

Sven asked me some stuff about the HTML5 Boilerplate Favicon PSD-Template while he was using it for a project. He discovered one problem I was not aware of and I don’t know how to work around: Android does not use one of the apple-touch-icons as a bookmark or as a shortcut on the home-screen in Android 2.3.

I do not know of any other usage of the icons in prior versions of Android. But this article by Rob Flaherty stats that it is working for Android 2.1 and 2.2 with some minor changes.
He also set up this demo-page. Feel free to test with this and share your results in the comments. It was not working for me though.
Android 2.3 uses the standard favicon for shortcuts on the home-screen and screenshots for bookmarks.

As always I’m linking back on one of Mathias Bynens great articles. He writes about touch icons and stuff. Read this for more information how to use icons properly.

Do you have any suggestions how to get the icons working, at least for the home-screen icon? This works very nice with the Apple devices (iPhone and iPad).

Is it only me or do you also think that there is pretty good stuff going on with Android in general but there’s a but pretty often when it comes to some minor thinks like for example touch icons. That’s bad :(.

Text-Shadow in Internet Explorer

This mothereffin shit is worth a blog-post. Even if it’s just a short one.

At this very moment I’m celebrating the fact that Internet Explorer 10 now supports text-shadows kinda excessively! Finally! Even Internet Explorer made it! Yayyyy!

For more details on this, please go and check out the Internet Explorer 10 Guide for Developers. Microsoft developers explain the usage of text-shadow here. But I guess it should be pretty clear how to use them as other browsers support them like forever.

Thanks goes out to Louis Lazaris for his tweet about it. Also @IE tweeted about this.

There are also some other cool things in Internet Explorer 10 concerning CSS3 stuff like hyphenation and animations. This is so worth it, Microsoft. Thanks for finally keep track with other browser vendors.

Another thing that’s pretty cool is support for so many HTML5 features in Internet Explorer 10 Platform Preview 3.

HTML5 Boilerplate Favicon PSD-Template

No longer maintained

Version 3.1 – Update 25.11.2012

Add current 16x16px favicon.

Version 3.0 – Update 25.05.2012

And again Daniel updated the template with some great things.
It now features the “new” HTML5 Boilerplate icons, you get a better overview of what icons are present and how the output of images is.
Apart from that Daniel made a bug-fix for the 144×144px touch icon where the PNG wasn’t saved by default.


Version 2.0 – Update 21.03.2012

Daniel has updated the favicon template with a 144×144px touch icon. This icon is needed for the high-resolution iPad Retina displays which are built into the latest version of the iPad. A version of this is also included in HTML5 Boilerplate by default. Please read this issue for more information and remember Mathias’ article, which he updated recently.

Thanks goes out to Daniel.


I’m using HTML5 Boilerplate (H5BP) for nearly all of my projects at the moment. Why? Mh, I think mostly because it provides best practice for so many things concerning front-end development. With H5BP I learned how to use favicons (or touch icons) in different variations for smartphones and stuff properly.

Friend and boss Daniel designed a nice PSD template to create the various icons you need. It has four different sizes and includes slices and meta-information for everything. You just need to include your favicon, “Save for Web” and you’re done.

He gives it away for free. So feel free to download and share. It would be pretty nice if you check out his Twitter-stream and follow him.

Preview   Download PSD

Additions

Please be aware that you also should add an apple-touch-icon.png. You could do this by copying apple-touch-icon-57x57-precomposed.png and rename this. Thanks Sven for the heads up.

A Note on .ico

Since you should always use a .ico file for the favicon in order to get it working in Internet Explorer I would advice you to open favicon.png in Photoshop and use the ICOFormat plugin to generate the .ico file.

Multi-Layer Favicons

Jon R. Humphrey made a layered favicon template and shared it on GitHub. Please check it out, it might be more helpful than this template from time to time.

Pseudo-Elements in Print-Styles for References in Links

This morning @t3node asked me about something CSS-related. This was kinda new for me because he never did this before I guess… He showed me a website he had printed and asked me to explain him, how it is possible to show links in printed websites with their reference printed next to it. He was kinda upset why not every frontend-developer includes this in his/her stylesheet when it comes to designing a new website. I wanted to explain everything that’s related to this topic that I’ve ever heard of but he asked me to write this blogpost as he is not pretty used to CSS and stuff.

Styles dedicated to print

To get this feature for a website you need to define some print styles.

1. link-Tag

It is possible to load up a stylesheet that is dedicated to server styles only for media print with

<link rel="stylesheet" href="css/some-print-styles.css" media="print">

Where media="print" is the important part here as it tells the browser to apply all styles it contains only for print-views of the website. I do not recommend this method because of some drawbacks for performace:

  • The client has to load the CSS-file even if it does not need it
  • This implies another HTTP-request
  • Even though it is not a lot: the browser needs to render the styles

2. @import in CSS-file

Another possible way to render styles only in print is to include a file with @import url("some-print-styles.css") print. This also has drawbacks on performance. Even more as the link-method as files get blocked for downloading in your browser if @importis used.

3. Inline styles

For inline styles it is also possible to define an attribute media.

<style media="print">
  .element {…}
</style>

4. Media queries

My favorite method to include styles for print are media-queries. It is possible to add styles for print via @media print. Maybe you are familiar with this because of media-queries dedicated to mobile devices. Once you’ve set up this environment you can start adding some styles for any print of your site. I recommend to add display: none;for elements that are not pretty important in a printed-version. This could be the sidebar and the footer or the navigation. The thing why I’m originally writing this is how to include the reference of a link in a printed version of a website. So I’m just going for it. It is just one pretty little rule!

Pseudo-Elements for generated content

A good use-case for pseudo-elements:

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

a[href] selects all links with the attribute href set and creates content :after it. attr(href) tells the browser to use this attribute as content. You may want to select a little bit different as you don’t want to display references in the navigation or so for instance. HTML5 Boilerplate makes use of this, too. These little features are why I love it so much. Go check it out and contribute. Chris Coyier has a pretty awesome article, tutorial and demo at CSS-Tricks which has nothing to do with print but describes the use of pseudo-elements and contentreally good. You should definitely read this.

Browsersupport

@media print is supported in all browsers for what I know. Except Internet Explorer 7 every browser supports :after at least good enough that content works with it. The bottleneck here seems to be attr(href). As I researched this it turned out that generated content with attr() is valid CSS 2.1. The spec adds a warningon this vary topic:

In CSS 2.1, it is not possible to refer to attribute values for other elements than the subject of the selector.

You will find more information on attr() in the CSS3 Specification. It seems as every browser (that is actually used) is going to support this except IE7 and below. I’ve set up this demo so you can test it in your favorite browser and edit it yourself. I would be glad if you share your results and thoughts on this topic in the comments.

Conclusion

As it turns out it’s kind of the right to support straightforward things. I believe everybody could at least add some default styles for print to a new website like HTML5 Boilerplate does by default. The little trick with pseudo-elements can also be pretty useful for other elements like abbr aso. Later on I noticed that @t3nodes website does not support this feature for print either. Maybe it will after he has read this post. My website and this blog do not make any special use of printed styles as I think it is not necessary that anyone prints out my blogposts. I don’t like to print thinks for myself as I believe that you could save some paper in regards to environment. But this is your decision – or the one of your customer.   Edit Thanks to Nicolas for his hint about the difference between pseudo-elements and pseudo-classes. You should also consider using ::after instead of :after. But be aware that IE8 does not support this.

Add Style-Syntax in Comments with `, _ and *

You may be familiar with the syntax of writing code-Tags like `some code here`. This is what is used by Github for example.

At Daring Fireball they wrote up the syntax. Not only for code-Tags but for various features that are connected to style and semantics.

In the comments of this blog it is possible to use some of the rules to add some markup to them.

For instance when you write:

Some fancy text with **styled _markup_** and `code`.

It will be transfered to

Some fancy text with <strong>styled <em>markup</em></strong> and <code>code</code>.

I really like to use these tags in comments to style them a little bit.

Use in your own intallation

So if you want to use them in your own WordPress-installation check the following function – paste it in your functions.php:

function my_preprocess_comment( $comment ) {
  // Replace all appereances of __ and ** with <b> and <strong>
  $comment['comment_content'] = preg_replace( '/__(.*?)__/is', '<b>$1</b>', $comment['comment_content'] );
  $comment['comment_content'] = preg_replace( '/\*\*(.*?)\*\*/is', '<strong>$1</strong>', $comment['comment_content'] );
 
  // Replace all appereances of _ and * with <i> and <em>
  $comment['comment_content'] = preg_replace( '/_(.*?)_/is', '<i>$1</em>', $comment['comment_content'] );
  $comment['comment_content'] = preg_replace( '/\*(.*?)\*/is', '<em>$1</em>', $comment['comment_content'] );
 
  // Replace all appereances of ` with <code>
  $comment['comment_content'] = preg_replace( '/`(.*?)`/is', '<code>$1</code>', $comment['comment_content'] );</code>
 
  return $comment;
}

You also need to add a filter to get the function working.

add_filter('preprocess_comment', 'my_preprocess_comment');

This is everything that’s necessary to get the style-tags for all of your comments. It’s pretty easy and you may help people that want to comment without thinking about HTML and stuff.
Even though if you think that it’s fine for users to use HTML if they want to style their comments and don’t want to add this function: Add this snipped anyway as it does not affect any existing functions in WordPress and the comment-section. It’s just an add-on.

Offer Files as Download with a@download

So the spec introduces a new attribute on a-tags (so called “links” – this may be new to you ;-)) called download (short: a@download – this technique of connecting attributes with tags is written up and documented by Mathias Bynens).

When you link to a file like an image or a PDF-document it will be displayed within the browser normally. The download-attribute in links prevents this behavior and offers the file as a download in your browser.

Definition

The spec allows the attribute for having a value. This value can be a string which defines the name of the downloaded file. As a default the browser takes the file’s original name.

And this is what it could look like in HTML:

<a href="path/to/file/file.png" download="a-nice-image.png">Download this file</a>

The value of the download-attribute overwrites the filename with a-nice-image.png.

The Content-Disposition-header can overwrite the name for the file.

This really nice demo exports a written text and offers it as download (but be aware of browser-support – see below).

Browsersupport

The download-attribute is not supported very good at the moment of writing this article.
Chrome supports it since its version 14. Version 14 is only a view weeks away from the stable release.
Firefox 8alpha (Aurora-channel) does not support it as far as I experienced it. I did not find anything about any intensions when Mozilla will include it.
And the other ones? No support yet!

So, what’s the fallback?

There are other techniques to serve a file that will be offered as a downloads in the browser. For instance you can use an HTTP-Header that’s a mime-type that the browser does not know.

Here is an example with PHP:

header('Content-Type: application/force-download');
header('Content-Disposition: attachment; filename="some-file-name.ext"');

You should then open the download in a new window or tab, or in an iframe to prevent any stupid browser-behavior.

More about this issue here.