By switching to Webkit, Opera is introducing to us a new level of user agent madness. I think it’s time to draw some lines, this is becoming ridiculous!!
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.60 Safari/537.17 OPR/14.0.1025.52315
I’m a Vampire, I’m 500 years old but I’m attending high school
I’m an Alien with great powers.. but I’m attending high school
I’m a Super duda hero who can save the city … but I’m attending high school
I’m starting to sense a pattern there… But I’m not going back to high school!!
A chaque jour son lot de nouveauté dans les navigateur. Aujourd’hui j’apprend que les navigateurs récents (IE10 et Firefox en tête) arrivent à prendre en charge correctement les traits d’union en fin de ligne [1] comme les journaux papiers d’antan. Pour ce faire vous aurez besoin de 2 ingrédients indispensables:
lang sur une balise de type block qui permet au navigateur de déterminer la langue du texte utilisé et donc d’appliquer les bonnes règles de césures en fin de ligne;hyphen;Noter que si vous ne voulez pas vous embétez et que votre site est en une seul langue, il vous suffira d’ajouter l’attribut lang à la balise html. Une autre raison donc de ne plus omettre cette attribut la prochaine fois que vous codez un site.
Et hop, un nouvel outil assez sympa pour permettre une meilleur présentation et/ou organisation de vos textes dans un monde ou le Responsive Design devient la norme. D’ailleurs pour les plus chanceux d’entre vous, j’ai adapté la feuille de style principale de mon site pour qu’elle prenne en compte cette propriété 
.
Avant d’être un développeur, je suis comme tout le monde un internaute qui aime surfer de page en page à la découverte de ce que le net peut offrir de bien comme de pire. Récemment je suis tombé sur un site ivoirien qui avait bloqué le clic droit et où la sélection de texte était impossible grâce à plusieurs script en JavaScript contenu dans la source du site.
Si je comprend la logique derrière cette action, essayer d’empêcher le vol de contenu, je pense qu’il est temps de dire que ce type de verrouillage est totalement contre productif en 2012.
M’empêcher de faire un copier/coller d’un texte ou de donner le lien d’une image à un tiers c’est m’empécher de faire de la pub gratuitement pour un site ou pour un contenu auprès de mon cercle social d’internaute. D’un point de vue purement marketing, cette prise de décision lors de la conception d’un site est tout simplement abérrante.
En plus de cela, il existe un règle d’or auquel il ne faut jamais déroger dans le design d’un site. il ne faut jamais réduire l’expérience utilisateur de base. C’est-à-dire que lorsque que l’on déploit un site, une application web c’est pour enrichir l’expérience utilisateur et non l’appauvrir en réduisant les actions possibles de l’utilisateur. Imaginez ce que serait naviguer sur votre site préféré en sachant que les boutons Retour en arrières sont bloqués. Le clic droit fait partie intégrante de l’interface de base d’un navigateur. A ce titre, il est fortement conseiller de ne jamais interférér avec son fonctionnement.
Alors, que faire ? Premièrement enlever le code qui entrave l’expérience utilisateur. Ensuite, si l’on estime que son contenu est véritablement unique est intéressant, il est temps de songer fortement à mettre en place une zone payante sur votre site où l’abonnement ou tout autre forme de souscription prendra en compte dans le prix, les pertes éventuelles liés au vol de contenu.
Car si il est facile de brider l’expérience utilisateur, il est bien plus difficile mais hautement plus rentable de trouver un meilleur business plan, pour le contenu que vous mettez à disposition sur le net.
Par nature, le web est ouvert, restreindre cette ouverture, c’est en quelque sorte vouloir faire sur le net quelque chose qui n’a rien à voir avec la philosophie dans laquelle il a été pensé. A bon entendeur, je vous salue.
If you can do that , tell me where to sign to join your Email services.
Comment modifier la page de connexion à votre zone d’administration de votre site qui tourne sous WordPress.
login.css et qui résidera dans le dossier de votre thème, pour ne pas encombrer inutilement function.php
login.css. Pour le coup j’ai fait ceci:
* { -moz-box-sizing:border-box; box-sizing:border-box; }
html { margin:0; padding:0; }
body.login { margin:0 auto; padding:0; background:#222 url(images/sogeking.jpg) no-repeat top left scroll; color:#999; background-size:cover; }
body.login form { margin:0 auto 5px; width:90%; background-color:rgba(255, 255, 255, .7); color:#222; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border:1px solid #f1f1f1; }
body.login label { color:#222; }
body.login input[type=text],
body.login input[type=password] { border:1px solid #aaa; background-color:rgba(255, 255, 255, .5); }
body.login input[type=submit] { padding:5px; border-radius:3px; background-color:#222; background-image:-webkit-linear-gradient(#444, #222); background-image:-moz-linear-gradient(#444, #222); background-image:-o-linear-gradient(#444, #222); background-image:linear-gradient(#444, #222); color:#fff; border:none; font-weight:normal; text-shadow:none; }
body.login input[type=submit]:hover { background-image:-webkit-linear-gradient(hsl(0, 80%, 50%), hsl(0, 80%, 30%)); background-image:-moz-linear-gradient(hsl(0, 80%, 50%), hsl(0, 80%, 30%)); background-image:-o-linear-gradient(hsl(0, 80%, 50%), hsl(0, 80%, 30%)); background-image:linear-gradient(hsl(0, 80%, 50%), hsl(0, 80%, 30%)); }
body.login .message,
body.login #login_error { width:100%; margin:0 auto 10px; padding:8px; border:none; color:#fff; font-size:1.2em; background:rgba(0,0,0,.2); }
body.login .message a,
body.login #login_error a { color:#c41d1d; }
body.login #login { padding-top:250px; }
body.login #login h1,
body.login #nav,
body.login #backtoblog { display:none; }
function.phpdans votre éditeur favori et ajoutez-y le code suivant:
add_action('login_enqueue_scripts', 'nyamsprod_login_style');
function nyamsprod_login_style() {
echo <link rel="stylesheet" href="', get_stylesheet_directory_uri() ,'/login.css">', PHP_EOL;
}
Imagine you have one page (A) with an iframe (B) in it and you want an action taking place on B to have an impact on A. This will always work if A and B are on the same domain, but once they are on 2 differents domains it does not work anymore for security reasons.
We are going to use the postMessage API. Luckily for us, this API is available in all modern browser including IE8+. (Lire la suite…)
La version finale de Internet Explorer 10 n’est pas encore sortie de chez Redmond mais on sait déjà que :
-ms-transform;On peut donc en conclure que toutes les propriétés qui rendent vos sites « shiny » (animation, transition, transform, gradient) fonctionneront dans IE10 sans préfixe. Ce serait déjà le cas , parait-il, sous la dernière version de test (la 6ème du genre) [1].
Sachant que je fais parti de l’immense majorité des gens qui ne verront jamais les preview de IE10 avant sa sortie finale, je m’empresse de faire comme si les previews n’avaient jamais existées et je me permet donc de virer sans aucun état d’âme les préfixes -ms- pour les propriétés CSS ci-dessus mentionnées. Cela me fera gagner un ligne de code par propriété (sauf, hélas, pour la propriété transform, à moins que IE9 ne soit mise à jour avec le patch qu’il faut, mais j’en doute ). Sachez que ce pas de nain est déjà un pas de géant dans l’éradication des préfixes chiants(?) dans les code CSS.
PS: le (?) à côté de chiant c’est juste pour l’autre débat sur l’opportunité des préfixes tout court en CSS et en JavaScript!!
Je viens de remarquer que Chrome s’est récemment mis à supporter la propriété calc. Encore un peu d’efforts et Safari aussi le supportera, il ne manque plus que le navigateur d’Opera à l’appel pour enfin avoir un nouvel outils tout puissant pour améliorer la présentation des pages HTML en attendant tous les nouveaux modèles à l’essaie ou en discussion.
On peut suivre la progression du support de la propriété calc sur l’excellent site caniuse.com [1]
Using a single background image on a textarea to change its presentation is no so trivial after all. Modern browser engine (Gecko and Webkit, for now) allow textarea to be resize by the user. This resize that I’ve already talk about in another post can easily break your design if you don’t adapt your CSS . Here’s a technique that I use to mitigate the new behaviour in modern browser.
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. (Lire la suite…)