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 !
une réaction
1 De Mitch 74 - 29/11/2011, 21:44
heu...
@media handheld { body#h2g2:before{ content:"don't panic"; text-transform:uppercase; font:bolder 34px/38px comic,serif; }}
@media all { .hitchiker { list-style:square url('towel.jpeg') }}
J'ai bon?