inline-block

IE 8, 9, 10 :

@media screen\0 { .ie-8-9-10-class { property:value; } }

IE 11 :

_:-ms-fullscreen, :root .ie-11-class { property:value; }

IE Edge :

À l’application d’un dégradé d’une couleur vers transparent en css avec linear-gradient, j’ai remarqué que la couleur transparente était mal interprété par Safari.

.gradient-safari-bug { background: linear-gradient(transparent, #e74c3c); }

Une solution pour avoir le bon rendu est d’appliquer une couleur avec rgba avec l’alpha à 0 pour correspondre a une couleur transparente :

.gradient-safari-ok { background: linear-gradient(rgba(255,255,255,0), #e74c3c); }

IE (9 et 8 dans mon cas) peut mal interpréter le line-height appliqué en css au content d'un :before :

div:before { content: 'hello'; line-height: 36px; }

Dans ce cas, il faut appliquer line-height sur la propriété parent (div) et non sur le :before :

Utilisateur de Mac et fatalement dépendant de iTunes qui ne supporte pas les musiques en .flac, il vous faut alors les convertir en .mp3. Oubliez les différents soft plombés de pub disponible sur le net et ouvrez votre terminal. Pour convertir vos musiques en .flac en .mp3 ils vous faudra 2 libs à installer au préalable, flac et lame :

brew install lame brew install flac

Rendez-vous dans le répertoire de vos musiques .flac puis pour convertir tous les fichiers en .mp3 :

cd MonSuperAlbumFlac/ for i in *.flac; do flac -cd $i | lame -h - "${i%.flac}.mp3"; done

Pour ajouter !important sur une mixin Sass ou Compass, on peut penser à l’écrire à la suite de la mixin comme :

.class { @include border-radius(4px) !important; // ERROR BRO }

Qui ne fonctionne pas. Il faut le mettre dans la valeur même :

.class { @include border-radius(4px !important); }

Pour des raisons nobles et d’accessibilité (je pense), Chrome sur Android peut augmenter la taille de la typo de votre page si le navigateur juge que celle-ci est trop petite sur votre site, surtout sur des sites non responsives. Il est aussi possible de l'appliquer manuellement dans la config de Chrome.

Ça peut devenir gênant en terme de rendu par rapport au design, on voudrait par exemple que le rendu soit toujours le même sur desktop et mobile, et pour ça il y a un petit hack en css, d'augmenter la valeur de max-height et choisir une valeur théoriquement grande pour qu'elle ne soit jamais atteinte :

Je suis tombé sur une question sur Stackoverflow qui voulait animer le placeholder pour lui donner un effet d'apparition en animation avec pour piste d'agrandir la largeur.

Première idée que j'ai eu était d'appliquer un élément qui aura le rôle de calque par dessus le input avec :before et de l'animer. Le soucis c'est qu'on ne peut pas appliquer de pseudo-élément à la balise input. Sachant qu'on peut appliquer du style au placeholer j'ai essayé d'appliquer le pseudo-élément au placeholder lui-même et qui sera dans notre cas plus cohérent...et ça fonctionne ! Je trouve ça marrant et étrange à la fois qu'on puisse appliquer des pseudo-éléments au placeholder mais pas au input. Du coup ça devient jouable :

@include keyframes(apparition) { 0% { width: 100%; } 100% { width: 0; } } input { height: 40px; width: 200px; @include input-placeholder { position: relative; &:before { background-color: #fff; content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 100%; @include animation(apparition 5s infinite linear); } } }

Résultat : http://codepen.io/pik_at/pen/wBmmoY

Pour afficher les balises html sur une page web, il faut remplacer certains caractères comme les chevrons en code texte pour qu'il ne soient pas interprétés par la page.

En javascript :

var entityMap = { "&": "&", "<": "<", ">": ">", '"': '"', "'": ''', "/": '/' }; function escapeHtml(string) { return String(string).replace(/[&<>"'\/]/g, function (s) { return entityMap[s]; }); }

Exemple en ligne.

function download(filename, text) { var link = document.createElement('a'); link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', filename); link.click(); }

Si comme moi vous êtes passé sur Mac OSX Yosemite et que vous avez lancé Compass / Sass vous êtes peut-être tombé sur une erreur sur ruby et sa version. Il faut en fait le réinstaller, lancer dans le terminal :

xcode-select --install

Ensuite Lancer Xcode et accepter les conditions du logiciels. Puis retour sur le terminal :

input[type=text]::-webkit-input-placeholder{ color: #8a8a8a; } input[type=text]:-moz-placeholder { color: #8a8a8a; opacity: 1; } input[type=text]::-moz-placeholder { color: #8a8a8a; opacity: 1; } input[type=text]:-ms-input-placeholder { color: #8a8a8a; }

Ou en Sass (scss) :

input[type="text"] { @include input-placeholder { color: #8a8a8a; @include opacity(1); } }

Dans mon cas je devais avoir la vidéo en iframe dans ma page, qui apparemment fonctionné il y a un temps et maintenant la place de la (embed) vidéo est toujours bien occupé mais sans la vidéo et laisse à la place un écran blanc (ou transparent). La console de Firefox me remonte une erreur JS à partir du script de Jquery avec : Blocage du chargement du contenu mixte actif (mixed active content) « http://www.youtube.com/embed/azerty »

Et sur chrome, plus explicite :[blocked] The page at 'https://www....' was loaded over HTTPS, but ran insecure content from 'http://www.youtube.com/embed/azerty': this content should also be loaded over HTTPS.

Tout intégrateur web a déjà eu à découper d'une maquette un triangle d'UI puis de l'intégrer. On découperait le triangle et on le mettrait en background-image en jouant sur sa position.

Une solution simple et connue (mais apparemment peu utilisée) sans avoir à découper dans un sprite et de charger une nouvelle image est de créer le triangle en css et d'intégrer le triangle par exemple avec :before en absolute et son parent en relative et positionné le.

Parmi les avantages, on ne retrouve pas de dégradation de taille et donc le support retina. Si on doit changer la taille du triangle on aura juste à changer ses paramètres css et (surtout) c'est supporté sur IE !

J'ai fais un petit exemple rapide : http://codepen.io/pik_at/pen/mfHLv

Il y a des sites qui proposent de générer le triangle en css en définissant ses paramètres comme sa hauteur sa largeur et sa couleur comme :

http://apps.eky.hk/css-triangle-generator

Chargement du widget.js de Twitter avec jQuery :

window.twttr = (function (d,s,id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); }(document, "script", "twitter-wjs")); twttr.ready(function(twttr) { twttr.events.bind('tweet', function (event) { alert("This is a callback from a tweet"); }); });

avec Jquery :

$.getScript("http://platform.twitter.com/widgets.js", function(){ function handleTweetEvent(event){ if (event) { alert("This is a callback from a tweet"); } } twttr.events.bind('tweet', handleTweetEvent); });

Le custom Tweet bouton html :

<a href="http://twitter.com/intent/tweet?url=http://anthonyly.com.com;via=pik_at">twitter</a>

Exemple live :

J'ai eu besoin à l'intégration d'une page, à produire une grille d'éléments comportant une image et un titre en dessous avec une largeur fixe. En css, une application d'un float: left; sur toutes les box, ce qui me donna quelque chose comme ça :

Ça fonctionne !.. Seulement c'est le cas idéal ici, la hauteur de chaque box est la même. Si jamais par exemple, le titre d'un élément serait plus long et du coup prendrait plusieurs ligne, ça ressemblerait à ça :

Et là tout est cassé ! Une solution pour conserver la liberté d'une hauteur variable est d'analyser la grille et d'appliqué un clear: both; au premier élément de chaque ligne, dans mon cas chaque ligne à 3 éléments donc au 3n+1 :

.box:nth-child(3n+1) { clear: both; }

Ce qui résout le problème et donne visuellement :

Et si on veut que ça marche sous IE en dessous de la version 9 qui ne comprend pas la pseudo classe :nth-child, il y a Selectivrz.

Cas idéal

Cas cassé

La propriété opacity en css permet de rendre un élément et ses enfant transparent

#element { opacity : 0.2; }

Sur IE, cette propriété est supporté à partir de IE9, en dessous il faudra utiliser des propriétés spécifiques, dans mon cas j'ai eu besoin que cela fonctionne sous IE 8 avec -ms-filter :

#element { opacity : 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; }

Sauf que cette propriété n'affecte pas tous les enfants. Pour que les enfants héritent également de la transparence sous IE il faut leur préciser l'héritage avec inherit :

#element img { -ms-filter: inherit; } /* ou tous les enfants */ #element * { -ms-filter: inherit; }

Pour annuler la transparence et donc réinitialiser -ms-filter :