Përputhshmëria e ndër-shfletuesve zakonisht i referohet aftësisë së një faqe interneti për t'u dukur e njëjtë (ose po aq e mirë) në të gjithë shfletuesit.
Në mënyrë që faqja të duket sa më identike në të gjithë shfletuesit (moderne + mbështetje për disa të vjetëruar), duhet të dini teknika dhe veçori të ndryshme të shfletuesve. Ne do t'i studiojmë ato tani.
Blloko. Shfletuesit modernëAktualisht, shfletuesit e mëposhtëm janë të njohur: Internet Explorer (shkurtuar si IE, një shfletues nga Microsoft, i integruar në Windows), Opera (një shfletues norvegjez), Mozilla (aka Firefox), Google Chrome (një shfletues nga Google), Safari (një shfletuesi nga Apple). Shfletuesit për pajisjet mobile: Android, iOS.
Blloko. Motorët e shfletuesvePërveç shfletuesve, ekziston një gjë e tillë si motorri shfletuesi. Motori është thelbi i shfletuesit, i cili konverton HTML dhe CSS në një imazh të dukshëm në ekran. Ka shumë më pak motorë se sa ka shfletues dhe, si rezultat, shumë shfletues kanë të njëjtët motorë dhe për rrjedhojë të njëjtat veçori dhe gabime (probleme).
Llojet e motorëve: Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera deri në versionin 14). Trident (Internet Explorer).
Ju lutemi vini re se Opera, duke filluar me versionin 14, kaloi në motorin Webkit.
Aktualisht, Webkit është ndarë në dy motorë Blink nga Google Chrome dhe Opera 14+ dhe një motor nga Safari. Këta dy motorë ende mbështesin prefiksin -webkit, megjithatë, ndarja e tyre tashmë mund të shihet në disa veti CSS, të tilla si vizat
Shfletuesi i Internet Explorer zyrtarisht nuk ekziston më; versioni i tij i fundit është i 11-ti. Megjithatë, në fakt, ky shfletues ka ndryshuar emrin e tij (por jo motorin) dhe tani quhet Edge.
Blloko. Prefikset e shitësitSituata aktuale midis shfletuesve është se përpara se një veçori CSS të shfaqet në specifikim, shfletuesit mund të zbatojnë një version provë të asaj vetie me një prefiks të veçantë të quajtur prefiksi i shitësit(nga fjala shitës - zhvillues, parashtesë e zhvilluesve).
Le të shohim se si duket kjo duke përdorur shembullin e vetive të madhësisë së kutisë (ndryshimi i modelit të bllokut).
P (madhësia e kutisë: kutia e kufirit;)
Kjo veçori mbështetej vetëm në Firefox 29, por ka qenë e disponueshme me prefiksin -moz që nga Firefox 2:
P (-moz-box-sizing: border-box;)
Shfletuesit e tjerë kanë prefikse të ngjashme: -moz - Mozilla/Firefox (motor Gecko), -webkit - shfletues të bazuar në motorin Webkit (Google Chrome, Safari, Opera 14+, Android, IOS), -o - Opera deri në versionin 13 përfshirëse (Motor Presto ), -ms – IE nga versioni 8+.
Kështu, versioni më ndër-shfletues i vetive të madhësisë së kutisë, duke përdorur prefikset e shitësit, do të duket kështu (nuk ka nevojë ta shkruani atë me prefiksin -ms, IE kaloi menjëherë në mbështetjen e kësaj vetie):
P ( -sizing-webkit-box: border-box; -moz-box-sizing: border-box; size-box: border-box; )
Në CSS, shumë veti kanë një zbatim të ngjashëm: me ose pa parashtesë.
Ju lutemi vini re gjithashtu se Opera ka kaluar në Webkit nga versioni 14 dhe tani do të përdorë prefiksin -webkit, ndërsa prefiksi -o do të mbetet vetëm për versionet më të vjetra (deri në 14).
Ekziston rregulli i mëposhtëm: vetitë me parashtesa shkruhen para vetive pa parashtesë. Kjo bëhet në mënyrë që vetia kryesore të anashkalojë vetitë e parashtesuara, pasi shfletuesi mund të mbështesë një pronë me ose pa një parashtesë. Dhe një pronë me një parashtesë mund të funksionojë me disa probleme.
Aktualisht, disa shfletues kanë vendosur të braktisin prefikset për shkak të shqetësimit të tyre. Dhe tani në vend të tyre përdorin të ashtuquajturat flamuj. Karakteristikat tani janë të ngulitura në shfletues, por janë çaktivizuar si parazgjedhje, megjithatë ato mund të aktivizohen në cilësimet e shfletuesit duke kontrolluar kutinë e duhur në preferencat. Aktualisht, shfletuesit Google Chrome dhe Opera e mbështesin këtë model për pronat e reja.
Blloko. Ku mund të shoh çfarë parashtesa të shkruaj?Unë rekomandoj një shërbim të veçantë caniuse.com, ku mund të shihni se cilat prona mund të përdoren tashmë dhe nëse keni nevojë të shkruani prefikse për to apo jo.
Blloko. Statistikat e shfletuesitPër të ditur se cili shfletues duhet të mbështetet aktualisht dhe cili duhet të braktiset, duhet të gjurmoni statistikat e shfletuesve në rajonin e faqes. Kjo mund të bëhet duke përdorur shërbimin e mëposhtëm: gs.statcounter.com - të gjithë shfletuesit me versione sipas vendit (anglisht).
Blloko. Si të testoni një faqe në shfletues të ndryshëmPas krijimit të një siti, duhet ta provoni atë në të gjithë shfletuesit e njohur. Megjithatë, bërja e kësaj nuk është aq e lehtë sa duket - jo vetëm që shfletuesit ndryshojnë nga versioni në version, por ka edhe dallime midis një versioni të shfletuesit në Windows dhe, për shembull, Linux. Është e qartë se është thjesht e pamundur të kesh një numër të tillë shfletuesish.
Shërbimet speciale vijnë në shpëtim që marrin pamje nga ekrani i faqes në versione të ndryshme të faqes.
Blloko. Normalizimi i stilevePërveç shkarkimeve, ekziston i ashtuquajturi normalizimi- kjo është kur vlerat e pronës (për shembull, diferenca dhe mbushja) nuk rivendosen në zero, por specifikohen disa vlera të përshtatshme (në mënyrë që mbushja e paracaktuar të jetë e njëjtë dhe e përshtatshme në të gjithë shfletuesit).
Filloni të zgjidhni problemet duke përdorur lidhjen e mëposhtme: probleme për mësimin.
Kur të vendosni gjithçka, kaloni në studimin e një teme të re.
Përshëndetje të dashur lexues!
Të gjithë duam që stilet që shkruajmë të shfaqen në mënyrë korrekte në shfletues të ndryshëm. Por çfarëdo që mund të thotë dikush, do t'ju duhet të shtoni stile në mënyrë që ato të funksionojnë në shfletues të tjerë. Ky proces quhet bërja e paraqitjes së faqes së internetit të pajtueshme me ndërshfletuesit. Pajtueshmëria ndërmjet shfletuesve është kur stilet css shfaqen saktë në shfletues të ndryshëm dhe versionet e tyre të ndryshme.
Do të doja të jap disa këshilla për procesin e sjelljes së CSS-së tuaj për përputhshmërinë e ndërshfletuesve mori më pak kohë.
2. Ju mund të kërkoni për më të njohurit stilet css, të cilat duken të pasakta në shfletues të tjerë. Gjeni hakime CSS për ta.
3. Ekzistojnë mjete të posaçme në ueb për gjenerimin e stileve të ndërthurjes së shfletuesve. Do të doja të veçoja 2 më interesantet për mendimin tim.
Mjete për përputhshmërinë e ndër-shfletuesve CSS.- Përshkruhen shumë stile;
- Ekziston një shembull përdorimi me rezultatin.
- Në fillim është e vështirë të lundrosh në faqe;
- Ju nuk mund të gjeneroni një stil me parametrat tuaj (është dhënë një shembull i përdorimit të tij).
Gjenerator CSS3
- I përshtatshëm dhe intuitiv në funksionim;
- Ju mund të gjeneroni stile për parametrat tuaj;
- Ju mund të shihni rezultatin e stilit të krijuar.
- Pak stile
Për të siguruar që një faqe të shfaqet po aq mirë në shfletues të ndryshëm, duhet të punoni në përputhshmërinë e saj me ndërshfletues. Testimi i faqes dhe korrigjimi i shënjimit html/css na ndihmon me këtë. Por ka mjete që mund t'ju ndihmojnë të zvogëloni vështirësinë e stilimit dhe të siguroni që stilet bazë të jenë të njëjta në shfletues të ndryshëm. Çfarë lloj mjetesh janë këto, pse dhe si t'i përdorim ato - ne do t'i shqyrtojmë më tej.
Shfletuesit dhe stilet bazëFakti është se çdo shfletues ka si parazgjedhje një grup të caktuar stilesh bazë që i zbaton në faqe si parazgjedhje. Dhe nëse krijojmë një faqe në html "të zhveshur" pa dizajn dhe stile, shfletuesi do të shfaqë përsëri etiketën në një madhësi më të madhe dhe të theksuar, një madhësi pak më të vogël, etj. Shfletuesi do të nxjerrë në pah tekstin në etiketë kursive, do ta bëjë të nënvizuar dhe të theksuar.
Kjo do të ndodhë sepse shfletuesi ka tashmë stilet e veta për elementët që aplikohen si parazgjedhje në faqet e hapura në të. Dhe fakti është se në shfletues të ndryshëm këto rregulla ndryshojnë pak, nga shfletuesi në shfletues. Rreth 10 vjet më parë këto dallime ishin mjaft dramatike dhe shumë të dukshme. Tani ato janë minimale, por ende ekzistojnë.
Për të hequr këto dallime dhe për të bërë që faqja të shfaqet e njëjtë në të gjithë shfletuesit si parazgjedhje, përdorni një skedar të veçantë .css: reset.css ose normalize.css
reset.css - çfarë bën dhe si ta përdorniSkedari i parë që u shfaq ishte reset.css. Ky skedar css përmban një listë të të gjitha etiketave të mundshme html dhe e rivendos vlerën e tyre në zero. Kjo do të thotë, ai heq të gjitha indencat e mundshme, e bën fontin të njëjtë në të gjitha etiketat, duke rivendosur të gjitha stilet e tekstit. Pra, të gjithë titujt dhe paragrafët shfaqen në tekst të thjeshtë, me të njëjtën madhësi dhe pa dhëmbëzim. Si rezultat, ne marrim rivendosjen e stileve të paracaktuar në të gjithë shfletuesit.
Punon kështu: fillimisht ne përfshijmë skedarin reset.css në faqe dhe më pas skedarin tonë me stile. Si rezultat, ne fillimisht rivendosim të gjitha stilet dhe vetëm më pas vendosim dizajnin e etiketave html në style.css. Në këtë mënyrë arrijmë që të gjithë shfletuesit të rivendosin stilet e tyre në parazgjedhje dhe të gjitha shënimet do të bazohen në stilet që kemi vendosur në style.css.
Shkarkoni reset.cssMund të shkarkoni reset.css në cssreset.com
Ose mund të shkarkoni versionin "Rivendosni CSS" 2.0 të Eric Meyer duke përdorur butonin më poshtë nga blogu im:
normalize.css - si funksionon dhe cili është ndryshimiPasi reset.css të lidhet me faqen, të gjitha stilet duhet të rishkruhen. Dhe sa herë që ky aktivitet bëhet i lodhshëm. Prandaj, rivendosja u zëvendësua nga një mjet tjetër - normalizimi. Normailze - siç nënkupton edhe emri, nuk i rivendos të gjitha stilet, por i normalizon ato, duke i sjellë ato në një pamje të vetme në të gjithë shfletuesit. Pas aplikimit të tij, stilet bazë për shfaqjen e titujve, madhësive të shkronjave, indenteve... unifikohen dhe shfaqen në mënyrë identike në të gjithë shfletuesit. Duke e përdorur atë, ju mund të kurseni një kohë të caktuar, e cila në rastin e rivendosjes do të shpenzohej për të shkruar stilet e rivendosjes.
Nëse nuk e keni përdorur ende normalize.css, ju rekomandoj ta provoni në projektin tuaj të ardhshëm dhe kush e di, ndoshta nuk do të jeni në gjendje ta refuzoni atë 😉
Shkarkoni normalize.cssMund ta shkarkoni normalize.css nga necolas.github.io/normalize.css
Ose shkarkoni nga blogu im:
Çfarë është më mirë rivendosja apo normalizimi?Nuk ka përgjigje të qartë.
E para rivendos të gjitha stilet, e dyta çon në një emërues të vetëm. Dizajnerët me përvojë të paraqitjes që përdorin reset.css zakonisht kanë grupet e tyre të stileve që përfshihen menjëherë pas rivendosjes për të stiluar përmbajtjen. Dhe ata nuk duhet të ripërcaktojnë stilet për elementët bazë çdo herë në një plan urbanistik të ri. Kështu bëj edhe unë. Jam rehat dhe e di se çfarë stilesh vendos si parazgjedhje dhe si funksionojnë.
normalizimi është i përshtatshëm nëse studioni strukturën e tij, mund ta modifikoni për t'iu përshtatur vetes - duke rregulluar pamjen bazë të etiketave. Dhe puna me të do të jetë gjithashtu e përshtatshme në fluturim - kur duhet të bëni shumë radhitje dhe shpesh.
Çdo mjet është i mirë, gjëja kryesore është ta përdorni siç duhet 😉
Mirëdita, aleatë!
Si layout designer, më duhet të përballem çdo ditë me veti të ndryshme CSS3, të cilat, dua apo s'dua, duhet t'i përdor në mënyrë që të shfaqen në mënyrë korrekte në të gjithë shfletuesit modern dhe jo modern. Sigurisht, kam mbledhur një bibliotekë të caktuar që e përdor kur krijoj projekte të ndryshme. E mblodha koleksionin tim nga burime dhe forume të ndryshme, në hapësirat e pakufishme të internetit, kështu që nuk është për t'u habitur nëse dikush tashmë ka hasur diçka veç e veç.
Ndoshta përfaqësuesit me përvojë të profesionit tonë nuk do të jenë të interesuar për këtë postim, por atyre më të rinj dhe më të papërvojë mund ta kenë të dobishme. Nga shokët e lartë, nga ana tjetër, dëshiroj të marr komente për mangësitë që mund të jenë të pranishme këtu, dhe pika të rëndësishme që, përkundrazi, mund të mungojnë këtu.
Që CSS3 të funksionojë siç duhet në të gjithë shfletuesit, duhet të përdorni disa biblioteka të jashtme.
Në fakt, pas të gjitha përgatitjeve, ju mund të shkoni direkt në pronat CSS3 që ne do të tallemi.
Skajet e rrumbullakosura ose rreze-kufitare .border-radius (rreze-kufitare: 10 px; klip i sfondit: padding-box; sjellje: url(PIE.htc); )Vetia sfond-clip: padding-box; eliminon mundësinë që fotografia në sfond të ndërhyjë në zonat tona të rrumbullakosura.
Sjellja e linjës: url(PIE.htc); lidh skedarin tonë PIE për të mbështetur këtë pronë IE.
Box shadow ose box-shadow .box-shadow( box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); sjellja: url (PIE.htc); )Filtri i vetive: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); përdoret për IE.Gradient në sfond ose sfond: linear-gradient() .gradient( background-color: #444444; sfond: -webkit-linear-gradient(lart, #444444, #999999); sfond: linear-gradient(to fund, #444444, #999999); filtër: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#81a8cb", endColorstr="#4477a1"); -pie-background: linear-gradient(në fund, #444444, #999999); sjellja: url(PIE.htc); ) Sfondi i dyfishtë ose sfondi: url(), url(); .multiple-background( sfond: url(back1.png) 0 0 pa përsëritje, url(back2.png) 0 0 pa përsëritje; -pie-background: url(back1.png) 0 0 pa përsëritje, url( back2.png) 0 0 pa përsëritje; sjellja: url(PIE.htc); )
Shfletuesit modernë duket se kuptojnë gjithçka, por për IE ne përsëri përdorim PIE. Picture në vend të stroke ose border-image: url(); .border-image( -webkit-border-image: url("image.png") 30 rrumbullakët; border-image: url("image.png") 30 rrumbullakët; sjellje: url(PIE.htc); )
Këtu vetia e sjelljes nuk do të funksionojë në IE10 Text shadow ose text-shadow Këtu mbarojnë bukuritë e PIE. Për të përdorur text shadow në IE, duhet të përdorni bibliotekën e lartpërmendur jQuery.textshadow.
Për ta përdorur atë, së pari duhet të specifikoni hijen tonë në stilet, për shfletuesit e rregullt
.text-shadow( text-hije: 1px 1px 3px #000; )
Dhe më pas, duke përdorur bibliotekën, kërkojmë nga shfletuesit e pazakontë IE që të na kuptojnë
$(funksion())( $(".text-shadow").textShadow(); ))
së pari, pa harruar, lidhni këtë bibliotekë dhe gjithçka që është e nevojshme për funksionimin e saj.
Fatkeqësisht, kjo pronë nuk do të funksionojë në shfletuesit IE7 dhe më të hershëm. Për momentin nuk kam gjetur një zgjidhje të saktë për këtë çështje, por kjo nuk do të thotë se nuk ekziston. Vendosja e blloqeve në një rresht ose ekran: inline-block Një veçori e shkëlqyer moderne që ju lejon të vendosni blloqe në një rresht pa përdorur veçoritë float etj. Për keqardhjen time, në praktikë, kam hasur në faktin se shumë njerëz e përdorin atë thjesht. Kështu është
.inline-block( shfaqja: blloku i brendshëm; )
Ky kod mbështetet vetëm nga shfletuesit më të fundit modernë. Për mbështetje të plotë, duhet të shtoni disa rreshta në të. Kodi i plotë është:
.inline-block (min-lartësia: 250 pikselë; ekrani: blloku brenda linjës; rreshtimi vertikal: lart; zmadhimi: 1; *ekrani: inline; _lartësia: 250 px; )
Këtu
shfaqja: -moz-inline-stack; përdoret për të kuptuar bllokun inline të vjetër të Mozilla-s.
prona vertikale-align: lart; Lidh të gjitha blloqet vertikalisht në krye. Në varësi të detyrës, mund ta bëni atë në fund.
Dhe në fund pronat
zmadhimi: 1; *ekrani: inline; _lartësia: 250px;
përdoren për IE. Vini re se në këtë rast përdoret _height: 250 sepse IE nuk e njeh vetinë min-height. Transparenca ose opacity .opacity( opacity: 0.5; filter: alfa(opacity=50); )
Ju lutemi vini re se në filtrat e përdorur për IE, vlera e transparencës specifikohet në intervalin nga 0 në 100, dhe jo nga 0 në 1 si zakonisht. Animacion ose tranzicion .transition ( -webkit-transition: të gjitha 1s lehtësi; tranzicioni: të gjitha 1s lehtësi; ) Transformimi i objekteve ose transformimi .transform( -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); )
Vetitë e tranzicionit dhe transformimit nuk mbështeten në shfletuesit IE më të ulët se versioni 9, dhe tranzicioni mbështetet vetëm nga versioni 10. Nuk kam gjetur ende një zgjidhje për IE-në e vjetër. Madhësia e sfondit ose madhësia e sfondit .sfondi-size( sfondi: url("back.jpg") qendra e sipërme pa përsëritje; -kotazhi i internetit-madhësia e sfondit: kopertina; madhësia e sfondit: kopertina; filtri:progid:DXImageTransform.Microsoft . AlphaImageLoader(src="back.jpg", sizingMethod="scale"); ) selektorët CSS3 E kemi fjalën për përzgjedhës si p.sh.
ul li:fist-child() ul li:fëmija e fundit() ul li:nth-child(3)() input() a:hover()
Dhe përzgjedhës të tjerë të dobishëm: të cilët u shtuan në CSS3. Për të ofruar mbështetje me cilësi të lartë për përzgjedhës të tillë, ne përdorim bibliotekën e lartpërmendur Selectivizr. Që të funksionojë, ne vetëm duhet ta përfshijmë atë përpara skedarit tonë CSS.
Një listë e plotë e përzgjedhësve me të cilët punon Selectivizr mund të gjendet në faqen zyrtare, në seksionin "Si funksionon?".
Së fundi, dëshiroj të vërej se nuk i kam marrë në konsideratë të gjitha vetitë për pajtueshmërinë e shfletuesve, por vetëm ato që përdoren më shpesh në praktikën e përditshme. Shpresoj që ky postim të jetë të paktën disi i dobishëm për ju!
Vetitë e përditësuara të rrezes kufitare dhe të patejdukshmërisë. Faleminderit Pepelsbey për vërejtjen e rreptë!
Përditësuar shumicën e pronave siç rekomandohet. Faleminderit shumë përdoruesit Aingis për ndihmën tuaj të madhe!
Nga autori: Paraqitja CSS është, në fakt, faza e dytë e paraqitjes së faqes në internet. Dhe padyshim shumë e rëndësishme, sepse në fund është ajo që formon pamjen e faqes. Sot do të doja të theksoja edhe një herë disa parime të rëndësishme të punës me fletët e stilit kaskadë.
Paraqitja duke përdorur css - çfarë është dhe pse është e nevojshme?Epo, së pari, një sqarim i vogël për fillestarët. Css është një gjuhë e mrekullueshme që përbëhet tërësisht nga vetitë dhe vlerat e tyre. Të njëjtat veti ju lejojnë të ndikoni në pamjen e elementeve në një mënyrë të caktuar. Për shembull, vetia e ngjyrës përcakton ngjyrën e tekstit, sfondin - sfondin e elementit, fontin - fontin e tij, etj., etj.
Në të vërtetë nuk ka aq shumë prona, kështu që CSS mund të quhet një teknologji mjaft e thjeshtë në internet që mund të mësohet lehtësisht. Një tjetër gjë është se teknologjia ka aftësinë për të ecur vazhdimisht përpara, veçanërisht teknologjia në fushën e ndërtimit të faqeve të internetit.
Pra, CSS u shpik për të krijuar pamje. Dhe ai e përballon mrekullisht detyrën e tij. HTML ju lejon të krijoni elementë, të krijoni markup dhe CSS ju lejon të dizajnoni të gjithë gjë. Këto dy gjuhë janë të lidhura në mënyrë të pandashme, kështu që nëse njëra hiqet, tjetra thjesht do të bëhet inferiore.
Prandaj, në fillim të punës, projektuesi i faqosjes krijon gjithmonë një strukturë, elementet e nevojshme dhe më pas i projekton të gjitha.
Gjërat themelore që mund të bëni në cssParaqitja e tabelës duke përdorur css. Në fakt, tabelat si një metodë shtypjeje u braktisën kryesisht për shkak të kodit të rëndë html, por jo shumë kohë më parë, në CSS u shfaqën veçori që bënë të mundur shndërrimin e çdo elementi në tabelar. Këtu janë: Ekrani: tabela, shfaqja: rreshti i tabelës, shfaqja: qeliza e tabelës.
Prandaj, vetia e shfaqjes përcakton se si do të shfaqet një element i veçantë në faqe. Vlera e parë e konverton elementin e dëshiruar në një tabelë, e dyta në një rresht tabele dhe e treta në një qelizë të veçantë. Pra, falë manipulimeve të tilla të thjeshta, mund të krijoni një tabelë artificiale në faqe pa një tabelë të vetme ose etiketë td në kod.
Paraqitja ndër-shfletuesi. Si mund të ndihmojë CSS me këtëDhe mund të ndihmojë shumë thjesht - rivendosni të gjitha pikat dhe rregullat që shfletuesit mund të shtojnë si parazgjedhje, dhe tashmë do të arrini një pajtueshmëri të caktuar ndër-shfletuesit. Të paktën shfletuesit e uebit do të funksionojnë sipas rregullave tuaja, dhe jo ju sipas rregullave të tyre. Kjo qasje quhet gjithashtu rivendosja e css. Kjo do të thotë, krijohet një grup stilesh që rivendosin cilësimet në parazgjedhje.
Ka shumë opsione të ndryshme për rivendosjen e css në ueb, pasi çdo zhvilluesi i uebit pëlqen ta bëjë atë ndryshe. Në versionin më primitiv, rivendosja e stileve mund të bëhet si kjo:
mbushje: 0; diferenca: 0; ul ( list-style: asnjë; |
Kjo do të thotë, ne thjesht hoqëm të gjitha mbushjet e brendshme dhe të jashtme dhe të gjithë elementët, dhe gjithashtu hoqëm pikat nga listat, sepse pak njerëz i përdorin ato sot. Qëllimi i një rivendosjeje css është t'ju lejojë të filloni stilimin nga e para.
Fig.1. Secili prej këtyre shokëve duhet të jetë i kënaqur, përndryshe ju mund të humbni vizitorët e mundshëm të faqes.
Paraqitja adaptive në cssParaqitja adaptive është përgjithësisht një degë e veçantë në zhvillimin e faqes në internet, por në këtë artikull unë thjesht do t'ju shpjegoj se çfarë është me një shembull të thjeshtë. Në përgjithësi, mendoj se është emërtuar shumë saktë. Të përshtatesh do të thotë të ndryshosh. Dhe në ndërtimin e faqes në internet, në thelb duhet të ndryshoni për rezolucione të ndryshme të ekranit. Nuk i takon personi të ndryshojë, dua të them.
Në përgjithësi, përshtatshmëria sot është pothuajse një parametër i detyrueshëm i një faqe interneti normale. Thelbi i saj është që dizajni i faqes dhe struktura e tij ndryshojnë pak në rezolucione të ndryshme të ekranit. Në telefonat inteligjentë dhe tabletët, për shembull, kolona anësore zhduket dhe në ekranet e mëdha faqosja ndalon së zmadhuari dhe përqendrohet.
Përshtatshmëria zbatohet duke përdorur të ashtuquajturat pyetje mediatike. Zakonisht ato shkruhen direkt në skedarin e stilit kryesor. Një shembull i thjeshtë i një pyetjeje mediatike:
@media dhe vetëm ekrani (gjerësia maksimale: 600 px) (img( float: asnjë; ) )
@media dhe vetëm ekrani (maksimumi - gjerësia: 600 px) ( img( float: asnjë; |
Cfare po ndodh? Me këtë kërkesë, ne i thamë shfletuesit se nëse gjerësia e ekranit është më pak se 600 piksele, atëherë duhet të ndalojë mbështjelljen e tekstit rreth imazheve. Per cfare? Epo, vetëm sepse imazhi dhe teksti në një rresht, vetëm 600 piksele të gjera, do të duken shumë keq.
Baza për përshtatshmërinë është hedhur duke përdorur vetinë max-width. Për shembull, gjerësia maksimale: 1320 px do të thotë që blloku maksimal do të shtrihet me 1320 pikselë, por nëse madhësia e dritares është më e vogël, ajo gjithashtu do të zvogëlohet. Asnjë lëvizje horizontale!
Fig.2. Një shembull i shkrimit të pyetjeve për media. Siç mund ta shihni, një shabllon mund të kërkojë një numër të mirë rregullash dhe stilesh për të zbatuar reagimin normal.
Cilin redaktues duhet të përdor për të punuar me css?Sigurisht, një program për paraqitjen CSS duhet të jetë pak a shumë inteligjent - me mbështetje për theksimin e sintaksës në minimum, sepse kjo është shumë e rëndësishme për perceptimin vizual të kodit.
Pamja e ekranit e kodit që sapo patë është marrë nga programi Notepad++, ku është hapur skedari css. Më duket se ky redaktues është thjesht i përsosur për të punuar me këtë gjuhë - përbërësit e ndryshëm të kodit theksohen shumë mirë, dhe nëse zhvilluesi gjithashtu i përmbahet rregullave të caktuara të projektimit, atëherë kodi lexohet mirë.
Mësoni më mirë cssPërputhshmëria e ndër-shfletuesve, përshtatshmëria, puna me tabela dhe shumë më tepër - e gjithë kjo mund të konsiderohet veçmas për një kohë shumë të gjatë, sepse css na siguron gjithçka që na nevojitet për të zbatuar një pamje të shkëlqyeshme për sitin.
Mund të mësoni më shumë se si ta përdorni këtë teknologji kur dizajnoni për pajisje celulare. Gjithashtu në seksionin tonë premium mund të gjeni mësime trajnimi mbi bazat e kësaj teknologjie, si dhe materiale më të avancuara në CSS3, kështu që nuk keni nevojë të kërkoni asgjë, gjithçka është tashmë atje, thjesht merrni dhe mësoni.
Është e pamundur në një artikull kaq të shkurtër t'ju tregoj në detaje për gjithçka që ofron faqosja duke përdorur teknologjinë CSS, por mendoj se keni kapur disa pika. Për të krijuar një faqe interneti, kjo është thjesht një gjuhë e nevojshme, pa të cilën nuk mund të bëni dhe materialet në faqen tonë të internetit, shumë prej të cilave janë falas, do t'ju ndihmojnë në mësimin e saj. Unë rekomandoj gjithashtu që të abonoheni në përditësimet për ta bërë më të lehtë marrjen e mësimeve të reja nga ne.
