Flexbox si Opera

Salut baieti cum zice si titlu am o problema cu opera. Vreau sa folosesc noul flexbox model, opera nu il suporta asa ca am apelat la jquery pt detectie. Unde gresesc?
css principal

#content{
width:100%;/*firefox flexbox*/
z-index:2;
display:box;
display:-webkit-box;
display:-moz-box;
}
#left, article, aside{
box-orient:vertical;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
}
#left{
width:200px;
z-index:3;
background-color:#093;
box-ordinal-group:1;
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
}
article{
width:600px;
z-index:3;
background-color:#0F3;
box-ordinal-group:2;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
}
aside{
width:200px;
z-index:3;
background-color:#696;
box-ordinal-group:3;
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
}

css special pt opera

.stupidOperaContent{
width:1000px !important;
display:block !important;
}
.stupidOperaLeftContentAside{
display:inline-block !important;
}
.stupidOperaFloatLeft{
float:left !important;
}
.stupidOperaFloatRight{
float: right !important;
}

si jquery

if($.browser.opera){
$('#content').addClass('stupidOperaContent');
$('#left aside article').addClass('stupidOperaLeftContentAside');
$('article').addClass('stupidOperaFloatLeft');
$('aside').addClass('stupidOperaFloatRight');
$('footer').css('clear','both');
}

Din cate stiu eu "!important" ar fi trebuit sa rescrie declaratiile facute in css principal, si sa imi afiseze cele 3 zone (#left article aside) pozitionate una langa alta, dar mi le arata una sub alta. Unde gresesc?

Edited by danutz0501, 27 September 2012 - 11:07.

Mi se pare ca trebuie sa pui "flex-flow: row;" .
Uite-te putin aici : http://www.w3.org/TR/css3-flexbox/

Ms pt atentionare   , nu prea ma omor eu sa citesc spec la w3c mai ales ca e un draft, flexbox. Am renuntat la idee oricum am trecut la display inline-table.

Da' float:left ce are?

Nimic, dar nu imi plac floturile, amintiri de cand invatam html, si nu stiam ce inseamna o clasa clear-fix sau un amarat de clear:both

id-ul "#left" nu e semantic.

Adica nu e semantic, la ce te referi? E section. Deci o sectiune a paginii, care o sa ramana constanta tot timpul. Doar article si aside o sa fie generate dinamic din baza de date.

danutz0501, on 10 octombrie 2012 - 00:31, said:

Pai da, zici ca nu esti in stare sa inveti doua amarite de reguli pentru float clearing, insa declari cu emfaza ca float si Opera sint prostii. Cool!
Nici IE nu are suport pentru flexbox, iar al lui Safari este slab de tot. De altfel, in afara de Chrome (si Firefox, insa nu hack-uri), nici un browser nu are suport suficient. Ai nevoie de o gramada de hack-uri, si practic scrii mai mult cod decit ai fi scris folosind float. Nici nu se poate folosi pentru productie, doar in scopuri experimentale. Dar Opera este o prostie, evident! NOT! Pentru informarea ta, Opera mobile 12.1 este singurul browser care are suport in pentru flexbox fara prefixe. Si in scurt timp ise Opera 12.1 desktop. Asa ca mai incet cu Opera is stupid!

Foarte laudabil insa efortul de a folosi tehnici experimentale. Si da, #left nu este semantic, pentru ca este prezentational. Daca elementul respectiv te-ai hotari mai tirziu sa il muti la dreapta, o sa arate ca un idiot chemindu-l "left"

Edited by Jumping Jack, 14 October 2012 - 17:15.

In caz de nu ai citit mai atent, am zis cand invatam. Flex box e pt a invata, daca vreau sa fac un site care chiar sa il folosesc folosesc grid.Al meu sau altu pe diverse marimi.
1000px= 50px * 20(subdiviziuni)

.all{
width:1000px;
margin:0px auto;
position:relative;
text-align:left;
border:0px;
outline:0px;
z-index:1;
}
.g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12, .g13, .g14, .g15, .g16, .g17, .g18, .g19{
margin:0px;
padding:0px;
display:inline;
float:left;
min-height:1px;
border:0px;
outline:0px;
z-index:2;
}
.g1{width:50px;}
.g2{width:100px;}
.g3{width:150px;}
.g4{width:200px;}
.g5{width:250px;}
.g6{width:300px;}
.g7{width:350px;}
.g8{width:400px;}
.g9{width:450px;}
.g10{width:500px;}
.g11{width:550px;}
.g12{width:600px;}
.g13{width:650px;}
.g14{width:700px;}
.g15{width:750px;}
.g16{width:800px;}
.g17{width:850px;}
.g18{width:900px;}
.g19{width:950px;}
.r2{margin-left:50px;}
.r3{margin-left:100px;}
.r4{margin-left:150px;}
.r5{margin-left:200px;}
.r6{margin-left:250px;}
.r7{margin-left:300px;}
.r8{margin-left:350px;}
.r9{margin-left:400px;}
.r10{margin-left:450px;}
.r11{margin-left:500px;}
.r12{margin-left:550px;}
.r13{margin-left:600px;}
.r14{margin-left:650px;}
.r15{margin-left:700px;}
.r16{margin-left:750px;}
.r17{margin-left:800px;}
.r18{margin-left:850px;}
.r19{margin-left:900px;}
.alpha{
margin-left: 0;
}
.omega{
margin-right: 0;
}

Deci calm, ca stiu sa dau un clear:both acum. Sa scriu si clasa clearfix? A da stai eu nu stiu "2 reguli amarate" de clear.
SI da opera is stupid. Opera a avut probleme cu absolut orice de la display inline pana la reticenta cu care adopta orice e nou(css3).
In legatura cu faptul ca se numeste left, o sa mai fie STUPID daca il mut in dreapta si ai schimb numele in "idSemantic"
Sau daca folosesc gridul de mai sus, mai am nevoie macar sa ai dau id, sau pot folosii gridul pt latime, ele si asa fiind wrappere?

Edited by danutz0501, 14 October 2012 - 17:58.

danutz0501, on 14 octombrie 2012 - 17:41, said:

Chill man, toti sintem aici sa invatam unii de la altii.

Nu sint un mare fan al lui Opera, insa cred ca suportul pentru css3 este rezonabil pentru un browser de nisa, cum este el. De distractie, du-te la http://css3test.com/ si vezi ce scor obtii cu diferite browsere. Opera are un scor identic cu FF si safari, e mai slab ce-i drept decit Chrome, si mult mai bun decit IE9. Deci nu e chiar o caruta.

Arata-mi ce anume problema a avut Opera cu display:inline? Ca eu nu stiu de asa ceva. Dar poate ma insel.

Pe de alta parte, nu exista browser fara bug-uri. Insa nu stiu ce ma face sa cred ca de multe ori ceea ce unii numesc bugs nu sint altceva decit interpretarea corecta a specificatiei, insa fiind diferita de cea a altor browsere mai mainstream, este considerata gresita. Realitatea fiind de fapt fix pe dos.
Atat despre Opera.

In legatura cu controversa despre semantica: da, este gresit dpdv semantic sa denumesti un selector "left" sau "right" sau "center", din motivul aratat anterior. Poti sa ii spui "secondary", sau "secondaryContent", sau "nav".

Cit despre codul tau de mai sus, la ce, si de ce, sa dai id? N-ai destule clase acolo? Poti sa dai si id-uri, daca ai chef sa le diferentiezi mai mult, insa id-ul nu face nimic in plus fata de clasa, cu exceptia faptului ca are o specificitate de 10x mai puternica - class are specificitate 10, id are 100 (chiar iti trebuie?), si poate fi folosit o singura data in pagina. Deci, ce sens are?

Gud bai, ma duc sa maninc!