On peut suivre la progression du support de la propriété calc sur l’excellent site caniuse.com

To start with, here is a simple rule that should work on any browser (IE8+).

textarea {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:276px;
	height:172px;
	padding:20px;
	overflow:auto;
	border:none;
	background:#fff url(background.png) no-repeat center scroll;
}

The problem with this rule is that in modern browsers you can resize the textarea tag as you wish, which means that on resize my image design will break since the background image will not adapt to the resized textarea.

using CSS3 resize property

If you don’t want your user to break your design by resizing the textarea the simplest solution it’s to disallow the resize through CSS. this solution is simple, effective and backward compatible. The only problem with this solution is that you remove a very handy functionality from your website only because you don’t know how to work with it .

textarea {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:276px;
	height:172px;
	padding:20px;
	overflow:auto;
	border:none;
	background:#fff url(background.png) no-repeat center scroll;
	-moz-resize:none; resize:none;
}

using CSS3 Background module

My first attempt to find a simple solution to my problem was to use the CSS3 property: background-size. Which means that I just had to add a new property to my rule.

textarea {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:276px;
	height:172px;
	padding:20px;
	overflow:auto;
	border:none;
	background:#fff url(background.png) no-repeat center scroll;
	background-size:100% 100%;
}

In doing so, I know that my image will automagically adapt to the textarea resize. But I’ve introduced a new problem, the image ratio is never preserved which means that on resize, the image can be deformed and the result is not quite what I wanted. So even if this solution works and is backward compatible, the result is not great. So my suggestion is to avoid this technique. You may try to work around the problem using the min/max-height properties as well as the min/max-width property to further style the textarea in modern browser. But the loss of ratio is too important to be overlooked.

Using CSS3 Border module

Since I was not happy with this method, I tried another approach by using the CSS3 border module property: border-image. With this property, the image is sliced and repeated on the tag border following some specific rules. So whenever you resize the textarea, the image ratio remains intact and you finally get the resulting effect you wanted. You may think that everything is fine … but wait , this is CSS3 we’re talking about.

textarea {
	width:276px;
	height:172px;
	overflow:auto;
	border-width:5x;
	border-type:solid;
	border-color:transparent;
	-webkit-border-image:url(textarea.png) 5 repeat;
	-moz-border-image:url(textarea.png) 5 repeat;
	-ms-border-image:url(textarea.png) 5 repeat;
	-o-border-image:url(textarea.png) 5 repeat;
	border-image:url(textarea.png) 5 repeat;
	background-color:#fff;
}

Some points to consider:

• I used the border module not the background module so we do not use the background-image property.
• Since the border-image is relatively new it is not supported on IE browsers. Which means that on old browser and in IE, you’ll see no background image and no border either, so we need to create a fallback solution.

Modernizr to the rescue

To try to mitigate these issues, I had to rely on the excellent javascript framework modernizr which can detect browser support for the border-image property. With modernizr help, I only switch to the modern border module way only when possible. So When IE support the border-image property it will automagically switch to the border image module way.

Always read the Spec

After reading again the specification for the border-image property, in turns out that you can achieve a backward compatibility rendering without Javascript . The border-image has a value called fill which specify the following :

fill (optional)

If the « fill » keyword is present, the middle part of the border-image is preserved, and drawn as the background-image of the image.

So by using this fill value in border-image supporting browser we draw the image middle part above the declared background-image. By doing so we can specify both rules and gain a fallback behaviour .

.full {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width:276px; height:172px; overflow:auto;
	background:#fff url(pattern.png) no-repeat center scroll;
	border:20px solid transparent;
    /* Early Implementations the default behaviour was fill and/or fill was not supported */
    -webkit-border-image:url(pattern.png) 20 repeat;
       -moz-border-image:url(pattern.png) 20 repeat;
         -o-border-image:url(pattern.png) 20 repeat;
    /* new implementation: fill must be specified */
    -webkit-border-image:url(pattern.png) 20 fill repeat;
       -moz-border-image:url(pattern.png) 20 fill repeat;
         -o-border-image:url(pattern.png) 20 fill repeat;
    /* standard specification */
            border-image:url(pattern.png) 20 fill repeat;
}

Caveats

• First, you need to have your JavaScript activated to make this solution works. Always keep this in mind.
• Second, if IE start supporting the textarea resize attribute without supporting the border-image CSS property, my Solution won’t work since the two could be implemented separatly in a browser.
• Because we’re using 2 different css modules, the scrollbar position changes depending on the solution used. You may view theses changes when comparing my test page rendering in Opera.

To summarize my findings I’ve created a test page with all the techniques explained here with some comments to explain what I did. Feel free to use and abuse this page .

A thumbs up to my boy from PlanB Multimedia with this underground project called Saligoma. This joint is called Ibereshi and is from Maylo. For those who don’t understand Kinyarwanda Ibereshi it’s a rwandan deformation of the word « Camp des Belges » which trough time and slang has become the word used to title this joint.

I’m a Jeff Starr fan. Everytime he blogs something about  WordPress or JavaScript I’m curious to see what he comes up with to make our developer’s life easier. Today he has released the code he uses on his newly WordPress theme to dynamically display the « got the top » link .

After looking at the code I was frustrated about many aspects of it, in summary:

• If you don’t have JavaScript then you get no button;
• All the css code was embedded in the JavaScript so you could not easily adapt  the script to your own design without messing with the script;
• Everytime the resize event was called jQuery was basically re-creating the button;

The solution

So I came up with this improve version. I hope you’ll enjoy it, since it fixes all the above problems, adds a little animation thanks to jQuery and CSS animations (yes again ) and tries to be more responsive and less intrusive on the webpage.

How it works

Once You have included the CSS, the JavaScript and the HTML code in your page. The animation kicks start as you load the page. All the animations except from the scrolling back to the top page are manage by CSS. Which leave the author many choices on how he/she wants the link to be rendered.

I’ve associated the button to the scroll event . This event is only fired in jQuery if the element is scrollable which means that the window height is smaller than the document height .

If no Javascript is present the button still works has excepted by remaining visible on the page.

Suggestions

1. Since 98% of the script is handle through CSS, you can event adapt the button layout according to media queries to workaround more easily the position:fixed problems on smartphone for exemple. Use your imagination
2. Making a WordPress plugin out of it to ease it’s integration… Done!!
   Download nyams-top-link WordPress plugin

Bug Fixes:

1. I’ve removed the used of jQuery’s fadeIn and fadeOut and replaced them with CSS3 transitions. By doing so, I’m no longer firing continually the fadeIn animation everytime the page is scrolled;
2. Fixed the annoying double click issue;

j’utilise :

• l’excellent script prefixfree de Lea Verou pour ne pas avoir à écrire tous les versions préfixées des propriétés CSS non-stable;
• une version « custom » de modernizr qui détecte le support des animations CSS du navigateur afin de contourner un bug dans l’implantation sous Firefox.

Bref, c’est par ici pour voir la démo finale.

Le script qui génère les boutons Google+ ajoute dans votre page, outre une iframe (par bouton), des balises div, ins mais surtout des balises table au survol du bouton . Souvenez-vous en le jour où l’infobulle de Google+ a un rendu bizarre mais que vous ne savait pas pourquoi. Modifier votre feuille de style au niveau des propriétés des table
Mais pourquoi Google ne le dit pas sur sa page de documentation ?

Reminder:

Googleplus button script generated many tags, an iframe, a div and an ins tag but above all, some ugly table tag. So if fore some obscure reason the google plus info popup look ugly check your CSS and try to adapt the generic tables rules.

The only question is why on earth google does not share this info on the Button+1 documentation page ?

5Five is back again with a new song ready for the dance floor.

This song from Angola was written and produced by IVM the late producer from such hit like Cabo Snoop’s Windeck

1. Niveau MySQL:
   • A partir de la version 5.6.3 je peux utiliser les fonctions natives;
   • Avant je dois installer  les User Defined Functions si possible;
   • Stocker les adresses IPv6 dans un champs du type VARBINARY;
2. Niveau PHP:
   • A partir de la version PHP5.1, utiliser les fonctions inet_ntop et inet_pton