Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Schimbare adresa DNS IPv4 pe rout...

Recomandare Barebone

Monede JO 2024

Suprasolicitare sistem electric
 CIV auto import

Mutare in MOZAMBIC - pareri, expe...

Scoatere antifurt airtag de pe ha...

Magnet in loc de clește pent...
 Cumparat/Locuit in apartament si ...

Pot folosi sistemul PC pe post de...

Sokol cu distorsiuni de cross-over

Filtru apa potabila cu osmoza inv...
 Kanal D va difuza serialul “...

Upgrade xiaomi mi11

securitate - acum se dau drept - ...

Farmacia Dr Max - Pareri / Sugest...
 

Flexbox si Opera

- - - - -
  • Please log in to reply
9 replies to this topic

#1
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
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.


#2
Andrey77

Andrey77

    Member

  • Grup: Members
  • Posts: 688
  • Înscris: 22.12.2009
Mi se pare ca trebuie sa pui "flex-flow: row;" .
Uite-te putin aici : http://www.w3.org/TR/css3-flexbox/

#3
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
Ms pt atentionare Posted Image  , 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.

#4
RCG

RCG

    Senior Member

  • Grup: Senior Members
  • Posts: 2,386
  • Înscris: 20.09.2006
Da' float:left ce are? :)

#5
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
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 Posted Image

#6
OriginalCopy

OriginalCopy

    I'm harmful, fear me please! :))

  • Grup: Senior Members
  • Posts: 27,268
  • Înscris: 10.08.2006
id-ul "#left" nu e semantic.

#7
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
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.

#8
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View Postdanutz0501, on 10 octombrie 2012 - 00:31, said:

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 Posted Image
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" Posted Image

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


#9
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
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.


#10
Jumping Jack

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View Postdanutz0501, on 14 octombrie 2012 - 17:41, said:


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?

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!
:)

Anunturi

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate