Dans le web, il y a des combats essentiels. Notamment faire des css courtes. Voire des haïkus de présentations qui tiennent en un SMS. La guerre fut déclarée le 9 Novembre :

goetter Je propose un tag #CSSfight pour les prochains à jouer :)

Il y a des jours qui sont bénis... Comme celui-ci : ce jour où Adobe arrête Flash (sur mobiles) et Microsoft, Silverlight. Go standard web ! Go !
Mais en attendant, les grognards du web ont la soupe dure : le métier d'intégrateur reste ingrat et pas si bien payé vu ce qu'est capable de tomber un graphiste qui comprend rien au HTML... La vie est ingrate pour ces super-héros de la CSS, du référencement naturel et de l'accessibilité.

Quelques unes de mon crû :

body[author="Houellebeck"] { content : url(http://fr.wikipedia.org) }

#DSK + .woman { visibilty : hidden ; background : url(panther.jpg) mateer(furr) ; cocks : hard }

body#macOSclassic * {font-face:Chicago; background:grey ; color:black } section {border-radius:4px;} menu {background:white}

video.movie:play { lights : 0% ; doors : closed ; mobile-mode : airplane ; conversations : shutup }

@media press and (city : Puteaux) .canard-enchainee { visibility : hidden }

@media screen and (device-brand: apple) object[type="application/x-shockwave-flash"] { display : none }

bd.ligneclaire.humoristique { border : black 1px solid ; color : black ; background : white ; font-family : Comics Sans MS }

.inception { display : url(#) }

#female { color : pink } #female.ass:hover + #female.head { color : red }

@Nico3333fr avait proposé :
body#superman {background:blue;} #superman .slip {z-index:1;}
Je n'ai pu répliquer que par : body#superman #back:after {content : 'cape'; color : red}

Faut dire que les autres contributeurs sont réellement du métier et étaient bien plus talentueux que moi à ce petit jeu :

@Nico3333fr .edgar:hover{content:'President of USA'}

@PhilippeVay :any(.cordy,.lennox,.fratellini)

@geoffrey_crofte .toi + .moi + :any(:only-child, :only-of-type) {}

@eQRoeil #CSSfight : before{content : " : ( " } #CSSfight : after{ content : " : ) " }

@DirtyF .server address i p.local { content : "192.168.0.1" ;} #validCSS

@goetter .pull:hover { color : marine;}
Là, j'ai pas pu m'en empêcher, j'ai répondu <meta name="designer" value="Luc Besson" />

@PascaleLC .petite section:nth-child { height : 25% }

@goetter .neurone:only-child {color: blonde;}

@hhamon #michaeljackson:before { color: #000; } #michaeljackson:after { color: #fff; }

@walterstephanie .ie6:target::after {content (' Search and destroy ' ) ;} #ie6nomore

@goetter body:empty {font-weight : thin;}

@DirtyF .women input:required {min-height : 20cm;}

@morefnu .chocolat:not(.bras){display:none;}

@walterstephanie #bar:before:visited{display:table; position:fixed} #bar:after:visited {display:table; position:relative;}

@Nico3333fr .ikea { display : table }

@goetter #arthur table { border-radius : 100% ;}

@cyrilmarion .vodka { position : absolut ; }

@AntOneSan .delarue:before { display : inline ; }, .delarue:after { display : none ; }

Échéances électorales obligent, on a aussi stylé la politique :

@designoukk .bayrou { margin : 0 auto ; }

@Nico3333fr .sarkozy[longdesc="tallonnettes"] { visibility : hidden ; resize : none ; }

@anthony #marine { right : 100% ; }

@anthony #EricBesson { position : relative ; }

@geoffrey_crofte .politiques:lang("de_BOIS") { overflow: hidden; }

@goetter #DSK:empty-cell { cursor : hand }

@goetter .TousDes:focus

Des références à des films et des séries tv :

@versgui .americaine[name="abitbol"]:after { content:"Monde de merde"; }

@goetter #spielberg .encounters:nth-of-type(3)

@p0ulpe #spiderman { color : red ; position : absolute ; transform : rotate(180deg) ; }

@Nico3333fr .hulk .angry { color : green ; height : 200% ; transition : all 1s ease ; }

@goetter #Remy {font-family: none;} #oldies (pauvre Victor Hugo)

@Nico3333fr #fightclub:first-rule{content: "on ne parle pas du projet KO" !important;}

@glloq8 .casper { opacity : 0.5 }
@clowniseb : je serais allé + loin : .casper { background : #fff ; opacity : 0.5 ; box-shadow : 0 0 5px #fff ; }

@Nico3333fr #sangoku.cheveux {color:yellow;} #sangoku{box-shadow: 0px 0px 165px 0px yellow;} /** super sayan **/

@antonesan .titanic { float : none ; } Challenge accepted.

@Nico3333fr #jackbauer time {content : "24";}

@STPo select.tom

@PhilippeVay #paul { content : attr(id) }

Comme tous bons geeks, y'a eu beaucoup d'allusions à Star Wars :

@goetter : Un ptit CSS selectors fight ? Je commence -> abbr.laser { -o-biwan : pointer ; }

@jeherve #jedi .obiwan { color : #fff ; } #jedi .anakin { color : #000 ; box-shadow : 100px #000 ; } #coteobscur

@pjparra .yoda.speaking { direction: ltr; }
@goetter : Je propose une variante de @pjparra: @media speech {#yoda { direction: ltr; }}

@Nico3333fr .death * { color : black ; }

Quelques vacheries :

@NumEricR .proctologue { cursor : pointer ; }

@Pictode .homme #poussiere { visibility : hidden ; clear : none } .femme #poussiere { display : block ; zoom : 2 ; clear : both } #OuiJeSaisCEstSexiste

@Eroan .string { color : pink ; width : 1px ; height : 100% ; border : none }

@gabrielpillet .yourmom { width : 102% ; overflow : visible ;}

@br1o body.lady:first-child { font-weight : bolder }

Et finalement, ça devait arriver :

@Jibou #cssfight.trendingtopic { vertical-align : top }

Victoire !