#12876

[CSS] Note centrer une image dans un bloc

Le but : reproduire le même effet qu’on a quand Firefox affiche une image seule dans un onglet, en pure CSS.

Les conditions suivantes doivent être toujours vraies :
– l’image est toujours entièrement visible ;
– l’image est toujours dans ses proportions naturelles (pas de déformations)
– l’image est toujours centrée, sur les deux axes.

En pratique :
– quand l’image est plus grande que le viewport, l’image est redimensionnée en conservant ses proportions et en restant centrée ;
– quand l’image est plus petite que le viewport, l’image est affichée dans ses dimensions naturelles, centrée sur les deux axes


Le code :
#container {
    max-height: 100%;
}

#container img {
    /* Keeps image from going outside the screen */
    max-height: 100%;
    max-width: 100%;
    /* Keeps image from beeing distorted */
    height: auto;
    width: auto;
    /* centering horizontally AND vertically */
    /* 50% of container */
    position: relative;
    top: 50%;
    left: 50%;
    /* 50% of image */
    transform: translate(-50%,-50%);
}


Démo : http://lehollandaisvolant.net/tout/examples/center/

PS : Je me suis aperçu de ça plus tard, mais dans ma page de démo, je suis en mode Quircks. Il n’y a pas de "DOCTYPE html" pour passer en HTML5.
Le code fonctionnement donc directement.

Si vous êtes en HTML et que votre page n’affiche rien d’autre qu’une image au centre d’une page, alors il faudra ajouter un "height: 100%" au "body", sinon l’image sera centrée horizontalement mais pas verticalement.

Ceci vient du fait qu’en HTML5, le body et le html n’occupent que la place qu’ils occupent, alors qu’avant le html occupait toujours 100% de la hauteur de la page.
http://lehollandaisvolant.net/?mode=links&id=20150731185744

#12875

Lanceurs d'alerte : enquête pour trahison lancée contre deux journalistes allemands - Next INpact

Dans une démocratie, on aurait lu : « enquête pour trahison lancée contre l’État par deux citoyens ».
À la place on a l’État qui traque ceux qui dénoncent la mise en place d’une Stasi 2.0.

MÀJ 10/08/2015 : http://www.lemonde.fr/pixels/article/2015/08/10/la-justice-allemande-renonce-a-poursuivre-deux-journalistes-pour-trahison_4719275_4408996.html
Finalement la justice renonce à les poursuivre. C’est bien.
Merci Internet et le bad buzz, je suppose ?
http://www.nextinpact.com/news/96021-lanceurs-dalerte-enquete-pour-trahison-lancee-contre-deux-journalistes-allemands.htm

#12873

Les flagships se font cheap | NANO

L’état des smartphones actuellement, où comment les smartphones à 300€ n’ont plus à rien à envier à un smartphone phare d’une marque à 700+€.

Perso j’attends encore le jour où on pourra configurer notre téléphone : apn ? ram ? double sim ? carte SD ? écran anti-rayures ? sortie OTG ? HDMI ?
https://papernano.wordpress.com/2015/07/29/les-flagships-se-font-cheap/

#12872

New study shows Spain’s “Google tax” has been a disaster for publishers | Ars Technica

Et voilà, on vous l’avait dit : les Taxes Google sur les citations des sites de presse sont une connerie. En Espagne, Google a fermé Google News pour ne pas à avoir à payer les taxes. Résultat ? Le trafic des sites qui étaient dans Google News en Espagne ont été plombés.

Je crois qu’en France, Google paye quelques millions pour ne pas à avoir à payer une taxe et avoir le droit de continuer à avoir GG News en France (visiblement payer des pots de vins c’est moins cher que les taxes…). Mais du coups, les sites de presse ont le beurre et l’argent du beurre.
http://arstechnica.com/tech-policy/2015/07/new-study-shows-spains-google-tax-has-been-a-disaster-for-publishers/

#12871

In Defense of CSS — Dear Design Student — Medium

« Keep working with CSS — and not against it — and it’ll treat you right. »

Oui.

Un des exemples qu’on voit encore actuellement, c’est celui du menu horizontal avec des float.
Les flottants ne servent pas à ça. Ça produit des choses bizarres : et on patch ça avec un élément vide et « clear:both ». Et ça marche plus sur les mobiles, donc on utilise du responsive-design. Et finalement les flottants inversent l’ordre, donc on retouche au HTML, voire au PHP…

Alors qu’il existe l’option du « inline-block » qui est fait pour ça et qui n’a aucun de ces inconvénient.

S’il y a une chose que j’ai appris après 6 ans de HTML/CSS en autodidacte, c’est que les hacks bizarres, ça dépanne, mais ce n’est pas pratique : la moindre bordure, marge, changement d’écran ou de navigateur et tout est foutu en l’air. Donc on ne touche à rien et le site n’évolue plus. Alors que si on utilise un truc fait exprès pour ce qu’on veut faire, ça marchera partout, car tous les navigateurs qui prennent en charge une techno respectent le but de cette techno. Pas forcément les mêmes marges/bordures/décalage, mais le même but.
C’est pour ça que j’aime ce genre de choses : pas de hack, du solide, du propre.

(via)
https://deardesignstudent.com/in-defense-of-css-7d7eb198df73

#12869

Evolutionarily Stable Strategies ft. Richard Dawkins - YouTube

Intéressant, sur la stabilité d’un caractère au sein de la société.

L’humain n’est pas exclu de ça, et e-Penser en parlait dans sa vidéo sur les gauchers/droitiers : le ratio actuelle de gaucher/droitiers est d’environ 1/7, qui est stable depuis longtemps.

Sinon, en passant, les deux parties d’Uranium: Twisting the dragon’s tail, présenté par Derek Müller (le gars de Veritasium) sont diffusés ce soir en France à 22h40 sur Arte (jusqu’à 00h25).
Si comme moi vous n’avez pas la TV, il y a (ou aura) le moyen de voir ça en ligne prochainement (et autrement, les épisodes circulent déjà vous-savez-où en VO).
https://www.youtube.com/watch?v=mUxt--mMjwA

#12868

Test du stylo d'impression 3Doodler 2.0 pour dessiner en 3D

« Le 3Doodler est uniquement compatible avec les recharges 3Doodler. »

C’est bien ça que je crains dans ces outils. C’est le même "problème" volontaire dans les imprimantes à papier : des « consommables » inutilement chers.

Comme disait une des BD de The Oatmeal :
« Pen (ink contained in plastic) : $0.15
Ink Cartridge (ink contained in plastic) : $25.00 »



Sinon, un stylo comme ça me serait pas forcément utile pour créer, mais plutôt pour réparer des choses, faire tenir des pièces ensembles…
http://h5ckfun.info/dessiner-en-3d-stylo-3doodler-2-0/

#12867

Migration vers Windows 10 : Mozilla en colère contre la mise en avant d'Edge - Next INpact

Ben, ben dans 15 ans, l’Europe les obligera à faire un nouveau ballot screen…pour Windows 10 seulement…

Le plus indécent reste quand même que Microsoft se permette d’imposer ses choix à la place de l’utilisateur qui avait volontairement choisit autre chose. Après, avec Windows, on peut pas dire qu’on ne savait pas qu’on se retrouvera avec des bâtons dans les roues.
http://www.nextinpact.com/news/96011-migration-vers-windows-10-mozilla-en-colere-contre-mise-en-avant-dedge.htm