Despre css

1. Conteaza ordine proprietatilor (cred ca asa se numesc) ? Care este ordine corecta ?

2. Se incarca mai repede daca nu exista spatiu intre rosu si albastru ?

background:#fff;
width:10px;
height:10px;


3. Se incarca mai repede daca sunt puse in linie si fara spatii?

background:#fff;width:10px;height:1px;


edit
am gasit un articol in care scrie ca asta e ce mai folosita

.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;

/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #333;
margin: 10px;

/* Color */
background: #000;
color: #fff

/* Text */
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: right;

/* Other */
cursor: pointer;
}

"float" nu intra in categoria "Positioning" ?
"border-radius" nu intra la "Display & Box Model" ?
vad ca nu sunt acolo..

Edited by grobian, 05 October 2016 - 02:13.

nu conteaza ordinea proprietatilor,nu se incarca mai repede, la vitezele de azi...

-e mai bine sa scrii cod frumos, cu indentare

-"asta e ce mai folosita" -? - folosesti ce cod vrei tu ca sa creezi pagini html,css

grobian, on 05 octombrie 2016 - 02:05, said:

Da. Cele din urma le suprascriu pe cele dintai, daca este cazul. Deci corecta este ordinea pe care vrei sa o ai.

grobian, on 05 octombrie 2016 - 02:05, said:

Cu cat e mai compact un fisier, cu atat se incarca mai repede, dar pentru treburile astea nu te apuci tu sa scrii in mod special CSS-ul intr-un anume mod, ci comprimi fisierele CSS cu scule automatizate.

Fiecare byte in plus conteaza, in special daca ai multe mii de linii de CSS, si vrei sa te incadrezi intr-un frame TCP pentru tot CSS-ul (unified & compress) al unui site.

Bonus info: designerii reali folosesc limbaje precum SCSS.

Una peste alta, nu conteaza nici ordinea nici modul de scriere, in sensul intrebarii tale.

Unii ordoneaza proprietatile alfabetic. Altii le grupeaza pe functionalitati cum le-ai scris tu in exemplul tau.

Opinia mea este sa nu te cramponezi de asta acum.

Si nu te gandi absolut deloc sa scrii codul cumva sa fie mai rapid ca scoti niste spatii si le scrii pe o linie...

Scrie codul cat mai citet, cu comentarii cat mai multe etc.
Apoi, sint unelte automate care eliminima comentariile si comprima fisierele, dar sint inutile pt nivelul tau si chiar si pt companii maricele, de vreme ce oricum serverele stiu sa comprime gzip aceste fisiere.

Deci, scrie cu cat mai multe spatii, pe linii separate si tot asa. Asa cum iti afiseaza tie codepen si jsfiddle, ca am vazut ca le folosesti prin alte topice

OriginalCopy, on 05 octombrie 2016 - 06:07, said:

Mda, cei care nu folosesc scss sint ireali...

Ordinea in sensul intrebarii lui nu conteaza. Nu e vorba de repetat aceeasi proprietate si deci suprascris o alta...
Daca ii spui unui incepator ca fiecare byte conteaza... parca il si vad stergand acum manual fiecare spatiu si rescriind #ffffff in #fff
Si nu cred nici ca e la stadiul la care are mii de linii de css si are nevoie de grunt/gulp
comprimarea facuta de server e arhisuficienta si automata.

Ei, tu vorbești despre amatori, eu vorbesc despre profesioniști.

Am scris comprimarea se face automatizat, nu de mână. Învață să înțelegi ce citești.

Da, SCSS, porcăria asta de CSS nu are nici măcar mixins.

Și da, designerii reali lucrează cu mii de linii, pe puțin. Ăia ireali nici nu se văd.

Spun ce spun pentru ca el să se poată evalua unde se află dpv profesional pe această scală.

Căci dacă nu știi unde te afli, nu știi nici unde vrei să ajungi.

OriginalCopy nu ai dreptate deloc

deci el se referea la ordinea proprietatilor in aceleasi acolade,deci daca pun prima data dimensiunea fontului sau culoarea, nu conteaza

-daca te uiti la temele facute pt themeforest -care au cod de mii de randuri-vezi ca e f aerisit,cu spatii,comentarii...de altfel nici nu accepta tema pe themeforest daca nu e facuta bine codarea,chiar la nivel de design al codului,indentarea....


-atasez un fisier css, care are peste 5000 de linii de cod, dar e aerisit codul nu inghesuit ,comprimat,  si fisierul are doar 100 KB,  foarte mic, nesemnificativ pt vitezele de net de azi, si daca comparam cu imaginile care ocupa spatiu mult si care ele trebuie comprimate cu https://tinypng.com/ ....

Edited by cristirg, 05 October 2016 - 10:58.

cristirg, daca o tema e pe TF asta nu inseamna ca e si super bine facuta. Iar daca te-ai uita un pic cu atentie la unele teme de WP(de exemplu) vei vedea ca deja au inceput sa foloseasca in demo-uri si pluginuri pentru MINIFICARE(combina mai multe fisiere css/js si le comprima). Oare de ce?
Sa iti dau un exemplu la partea de comprimare:
[ http://image.prntscr.com/image/f168a2dfda26469a80e4719e442f3876.png - Pentru incarcare in pagina (embed) Click aici ]

Ai un css de 140kb, il comprimi si rezulta unul de 106kb.. buuun. Problema e ca un site de obicei nu are doar un fisier css, mai folosesti niste pluginuri, mai pui ceva cod din alte parti, etc. Si uite asa poti face ca din vreo 500-700kb sa ai la final 400-500kb. La fel si la partea cu js-urile. Poate pentru unu cu net la rds nu conteaza asta, dar pentru altii conteaza.
Ok. Acum sa vedem si de ce conteaza kb aia in minus. Pai, nene, pe site-ul tau mai intra si cu mobilul sau cu net de la Telekom sau retea de cartier, nu? Nu toti au acces la internet de mare viteza. Iar daca tu ii oferi in cod 5-15% doar spatiu si comentarii aiurea pe care utilizatorul oricum nu le vede decat in sursa paginii si care oricum NU ajuta cu nimic la afisarea paginii, de ce vrei sa ingreunezi incarcarea paginii?
Ideea e ca o pagina trebuie sa se incarce cat mai rapid, nu? Sau revenim in 1995 ca sa asteptam mult si bine pana se incarca?

Mai invatati si voi cum se optimizeaza un site la partea de incarcare, nu aratati cu degetul la ce face Vasile pe ThemeForest.

cristirg, on 05 octombrie 2016 - 10:50, said:

Si acum sa te intreb... dar la ce ajuta un vizitator spatiile si comentariile? Site-ul e facut pentru cel care face site-ul sau vizitatori?
Apropo: stiai ca un cod comprimat il poti decomprima ? Asta daca te deranjeaza ca nu ai spatiu prin cod si indentare atunci cand lucrezi.

Uite un exemplu si mai concret:
themenectar.com/demo/salient-app - fisierele css sunt comprimate cu BWP Minify si facut un singur fisier cu ele.
Daca decomprimi codul si apoi il comprimi uite ce arata:
Original script: 1157402b, minified script: 941046b. Gain: 216356b
Deci BWP Minify a scapat de cel putin 216kb din fisierele alea. Si nici nu erau cu niste comentarii in ele, doar decomprimate si cu cod indentat.
216KB doar din css... mai pune probabil inca atat si la js si ai aproape jumate de mega pe care NU il mai descarci. Deci nu conteaza comprimarea, asa-i?

Edited by tigerheart, 05 October 2016 - 11:34.

tigerheart
in primul rand initiatorul topicului cred e novice in css,web design...nu cred ca are nevoie el acum sa-si bata capul cu nu stiu cate comprimari, el trebuie sa invete sa codeze bine in html5,css2-3,bootstrap,jquery....eventual sa faca pozele mai mici cu tinypng.cred ca-i ajung astea, si sa scrie cod frumos indentat pt el in primul rand, si cu comentarii, ca sa stie el peste cateva luni ce a facut in paginile alea

Edited by cristirg, 05 October 2016 - 12:34.

Quote

Am raspuns pentru intrebarea asta nu a zis nimic de imagini sau alte lucruri. Hai sa discutam pe subiect

TF e un nivel, profesionalismul și competența de vârf sunt alt nivel.

OriginalCopy, on 05 octombrie 2016 - 07:53, said:

Cred ca dovedesti mai degraba cat esti de neprofesionist din ce spui aici.
Eu zic ca numai amatorii arunca asa termeni in contexte gresite.

Si te faci si ca nu observi ce am spus legat de ordinea operatiilor, unde ai dat un raspuns gresit si care poate sa il confuzeze pe om.

Tot repeti cuvantul profesionist... omul a pus o intrebare, raspunde la ea, nu ii spune despre lucruri care sa te faca sa pari tu mai important.
De asta spui ce spui

tigerheart, on 05 octombrie 2016 - 11:17, said:

Pfff... ce treaba are 1995 ul cu prefectura... daca tu imi poti arata o diferenta sesizabila intre un css de 100k si unul cu 20% mai mic, esti tare...
Evident insa nu asta era discutia aici. E ca si cum ai spune 100kb se incarca mai repede ca 99kb, nu, nu neaparat, dar chiar daca exprimi un truism asa, nu are nici o logica in context.

Contextul este un incepator care scrie cod ilizibil de dragul salvarii unui byte.
Si primul lucru care tre sa il invete este sa scrie cod cat mai lizibil, cat mai documentat (da, comentarii multe multe) si abia apoi, cand incepe el sa sesizeze ce tine de servere si TCP si protocoale sa ia decizia daca merita optimizarea asta excesiva, cum sa scoti spatiul din acest cod?? Chiar sinteti seriosi?

background:#fff;width:10px;height:1px;

tigerheart, on 05 octombrie 2016 - 11:17, said:

Oare de ce? Pt ca poate, nu pt ca e nevoie! Atunci cand folosesti grunt/gulp si se face minificare/comasare automat, o faci ca poti, nu ca e nevoie neaparat.

Fisierele css sint comprimate automat oricum de servere! Automat! Tu masori fisierul inainte de comprimare.
cam asa arata un .htaccess cu comprimarea activata:

# ------------------------------------------------------------------------------
# | Compression																|
# ------------------------------------------------------------------------------
<IfModule mod_deflate.c>
	# Force compression for mangled headers.
	# http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
	<IfModule mod_setenvif.c>
		<IfModule mod_headers.c>
			SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
			RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
		</IfModule>
	</IfModule>
	# Compress all output labeled with one of the following MIME-types
	# (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
	#  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
	#  as `AddOutputFilterByType` is still in the core directives).
	<IfModule mod_filter.c>
		AddOutputFilterByType DEFLATE application/atom+xml \
									  application/javascript \
									  application/json \
									  application/rss+xml \
									  application/vnd.ms-fontobject \
									  application/x-font-ttf \
									  application/x-web-app-manifest+json \
									  application/xhtml+xml \
									  application/xml \
									  font/opentype \
									  image/svg+xml \
									  image/x-icon \
									  text/css \
									  text/html \
									  text/plain \
									  text/x-component \
									  text/xml
	</IfModule>
</IfModule>

Deci nu vad la tine in postare sa zici nimic de asta... ii tot dai cu comprimarea.
Deci ce tre sa faca grobian, sa se apuce sa scrie fara space-uri sau ce anume?
Lasa-ti omul sa scrie cod si apoi mai vorbim, cand ajunge el la 5000 de randuri scrise.

Dar despre cache? Nu zicem nimic nici de cache? Oricum nu se downloadeaza css ul ala decat o data la prima accesare, apoi, din cache...

Pun pariu ca tu nu ai lucrat pana acum la un proiect suficient de mare sa necesite compresie pe css/javascript, nu te supara.

Si la javascript ce folosesti sa faci minificarea? Ca tot zici ca e obligatorie.

tigerheart, on 05 octombrie 2016 - 11:17, said:

Din vreo 500k faci 400k? hmmm.. nu prea conteaza dar ok... daca e sa o iei pe asa, chiar ca ar trebui sa recomprimi toate imaginile dintr-un site.

Se intampla asta? Aproape niciodata, pt ca nimeni nu are timp de asa ceva. Incarci poza, scrii articolul si mergi mai departe.
Siteul e suficient de rapid. Cazurile in care nu e suficient de rapid sint rare si sint datorate exclusiv as zice unor scripturi care ruleaza aiurea, asteapta raspunsuri aiurea etc
Dar sint dispus sa facem teste daca tu gasesti siteuri incetinite pt ca e CSSul necomprimat

maxtron_69, on 06 octombrie 2016 - 17:52, said:

Ia citeste asta:

grobian, on 05 octombrie 2016 - 02:05, said:

Si apoi citeste ce am raspuns eu. Daca ti se pare ca e cumva off topic, e problema ta.
Acum nu prea e la moda sa ai un singur css de 100kb. Cand vei invata ce e aia optimizare site putem discuta si mai multe + iti arat diferenta aia de care zici.

Faza cu 1995 - nu toata lumea are 1000 Mbps sau 4G pe telefon.

tigerheart, on 05 octombrie 2016 - 11:17, said:

Porbabil stia ca se poate decomprima, da, stim toti de cand s-a inventat zip-ul ca putem si decomprima.
Tu stiai ca oricum ti-l comprima serverul la fiecare cerere?

Dar ca dupa decomprimare, daca ai folosit ceva automat de minificare, ai pierdut probabil toate comentariile?

Cu ce ajuta un vizitator spatiile? Cu ce il deranjeaza insa... e putin offtopic. Adica mai mult.
Topicul e daca el tre sa scrie codul cu spatii sau nu...

Pana acum, daca nu interveneam si vedea raspunsul lui originalcopy si al tau, intelegea asa:
- trebuie sa scrie fara spatiu
- ordinea atributelor conteaza.

ENORM DE GRESIT LA AMBELE PUNCTE.

Nu tu sau originalcopy hotarati cum tre sa lucreze un profesionist... dar el nu a intrebat cum lucreaza un pro.
Nu hotaraste originalcopy daca un pro tre sa folos scss sau LESS de ex.
Eu sint profesionist dar ii recomand sa nu se gandeasca ABSOLUT DELOC la spatiul ocupat de cod, ci la a coda corect.

Apropo, stii ca sint tehnici prin care poti sa nu incarci css deloc pe anumite deviceuri, ci doar linii specifice acelui device?
Google le utilizeaza, PE PAGINI ACCESATE DE MILIARDE DE ORI PE ZI.

Nu e cazul in rest... daca optimizezi imaginile dintr-un site ai optimizat 99% din ce puteai optimiza pt viteza... restul e inutil in 99% din cazuri.
Proiectele f mari sint rare... Aici e vorba de un sarac om care vrea si el sa stie daca tre sa scrie codul cu spatii intre sau nu... hai sa fim seriosi.
Raspunsul e clar, CU SPATII, indenteaza cat mai mult etc. Restul, ca se poate minifica sau nu, e pt anul viitor, cand va capata un pic de experienta.

tigerheart, on 06 octombrie 2016 - 18:06, said:

Hai te rog sa discutam... invata-ma tu.

Pana una alta, vad ca nu ai raspuns la ce te-am intrebat... cum e cu comprimarea automata facuta de server?

Si arati cate stii si cand spui de 1000mbps... chiar ai nevoie de asa ceva pt un fisier css zici tu?

tigerheart, on 06 octombrie 2016 - 18:06, said:

Intrebarea e pusa evident de un incepator... tu vrei sa il faci pe saracul om sa scrie fara spatii
Mi se pare mult mai de bun simt sa spui "avantajul castigat e mult prea mic pt beneficii".

Primul lucru pe care tre sa il invete un incepator e sa indenteze codul. Si stiu ca si originalcopy stie asta, dar na... s-a nimerit sa raspunda aiurea un pic si nu ii place sa admita ca greseste, in general developerii sint orgoliosi.

ce vorbim de comprimarea fisierelor css cand folosim imagini,video-uri mp4,care ocupa o gramada de mb

-putem sa folosim cdn ,cu link catre animate.css,bootstrap.css,Font Awesome de pe serverele cdn..., poate acolo sunt comprimate bine si se incarca repede...

maxtron_69, on 06 octombrie 2016 - 18:30, said:

Am scris foarte precis ce am avut de scris, dar nu am fost citit cu atentie. Iete:

OriginalCopy, on 05 octombrie 2016 - 06:07, said:

Daca citesti raspunsul meu in contextul in care i l-am dat lui, si cum l-am citat pe el, "in mod special" inseamna "fara spatii / indentare", adica: sa nu se apuce sa scrie fara spatii codul.

Adica, eu cand raspund la o intrebare, pun raspunsul me intr-un context anume, nu e normal sa rupi raspunsul meu de contextul in care l-am dat si sa ai impresia ca spun altceva.

Cat despre ordinea proprietatilor, ea conteaza, ca

background: #ffffff url("img_tree.png") no-repeat right top;
background-color: #000000;

nu e totuna cu:

background-color: #000000;
background: #ffffff url("img_tree.png") no-repeat right top;

Fiind incepator, nu stim daca stie de aceste scurtaturi, deci eu unul prefer sa ii dau informatie corecta chiar si in corner cases: la modul general, asa cum a pus el intrebarea, ordinea conteaza.

Edited by OriginalCopy, 06 October 2016 - 20:44.

Ai dreptate, ai scris acel lucru insa ai lasat sa se inteleaga ca are nevoie de o unealta automata de compresie.

Nu are nevoie de trecut la astfel de unelte in primii ani... Cand probabil tot codul css scris intr'un an nu va totaliza 5000 linii, darmite per proiect.

Nu ca 5000 linii e o limita... E o cifra scoasa de noi.

Ordinea nu conteaza. Asta e raspunsul. Ce arati tu acolo e evident altceva, ma mir ca tre discutat... Repeti aceeasi proprietate de 2 ori. Evident ca ultima va fi prevalenta... Nu vad ce e de spus altceva. Chiar daca ai folosit un shorthand, e aceeasi proprietate. Deci hai sa o lasam balta cu ordinea.

Insa cand ai un junior pe care il mentorezi ca senior, cred ca e mult mai ok sa il inveti ca e primordial sa scrie cod indentat, sa foloseasca la greu spatii si linii goale, decat ca conteaza orice byte in dimensiunea fisierului. Nu conteaza, pur si simplu. Daca tii pe server compresia si cachingul activate, nici un tool de analiza nu se va plange ca nu ai minificat.

Minificare = cod pierdut, fie ca e comentarii sau nume variabile scurtate etc. Discutii care nu cred ca il intereseaza pe juniorul care inca nu e convins de necesitatea indentarii above everything else.

Practic, indentarea codului e mai importanta decat orice. Nu poti trece peste asta si discuta de scss, pana nu clarifici importanta indentarii si documentarii codului (comentarii). Ai cod mai putin ca comentariile si indentat corect? Excelent! Esti pe drumul cel bun. Inveti apoi despre unelte automate integrate intr'un sistem de continuos delivery, dar care nu fac obiectul acestui topic