Tokony ho 15 taona lasa izay, niasa tao amin'ny orinasa iray izay nanangananay fampiharana ho an'ny mpiasan'ny fitsangatsanganana, mpiasan'ny seranam-piaramanidina ary orinasam-piaramanidina izahay. Nanangana ny rafitra anatiny manokana ihany koa izahay ho an'ny singa UI sy ny fahaizan'ny fampiharana pejy tokana. Nanana singa ho an'ny zava-drehetra izahay: saha, bokotra, tabilao, salan'isa, datatables, menus, datepickers, selects, ary multiselects. Nanana singa div mihitsy aza izahay. Ny singa div anay dia tsara raha ny marina, namela anay hanao zoro boribory amin'ny navigateur rehetra, izay, na mino na tsia, dia tsy zavatra mora natao tamin'izany fotoana izany.

Ny asantsika dia natao tamin'ny fotoana iray teo amin'ny tantarantsika rehefa hita ho toy ny revolisiona nitondra antsika ho amin'ny ho avy ny JS, Ajax, ary ny HTML mavitrika. Tampoka teo, afaka nanavao pejy iray izahay, naka angona avy amin'ny mpizara iray, ary tsy voatery hivezivezy mankany amin'ny pejy hafa, izay hita ho miadana sy manjelanjelatra fotsy lehibe eo amin'ny efijery eo anelanelan'ireo pejy roa. Nisy andian-teny, nalaza tamin'i Jeff Atwood (mpanorina ny StackOverflow), izay mivaky hoe: "Ny fampiharana rehetra azo soratana amin'ny JavaScript dia hosoratana amin'ny JavaScript amin'ny farany." - Jeff Atwood

Aminay tamin'izany fotoana izany dia toa sahy nandeha sy namorona ireo apps ireo. Tsapa ho toy ny fankatoavana bodofotsy ny manao ny zava-drehetra miaraka amin'ny JS. Noho izany dia nanao ny zava-drehetra niaraka tamin'ny JS izahay, ary tsy tena naka fotoana hikarohana fomba hafa hanaovana zavatra. Tsy tena nahatsapa ny fandrisihana hianatra tsara izay azon'ny HTML sy CSS atao izahay. Tsy tena noraisinay ho sehatra fampiharana mivoatra amin'ny ankapobeny ny tranonkala. Ny ankamaroany dia nahita azy io ho toy ny zavatra tokony hokarakarainay, indrindra raha ny momba ny fanohanan'ny navigateur. Azontsika atao ny manipy JS bebe kokoa amin'izany mba hamitana zavatra. Nanampy ahy ve ny naka fotoana hianarana bebe kokoa momba ny fomba fiasan'ny tranonkala sy ny zavatra hita ao amin'ny lampihazo? Mazava ho azy, mety ho nanaratra andian-kaody tsy tena ilaina aho. Saingy, tamin'izany fotoana izany, angamba tsy dia be loatra. Hitanao fa tena niavaka ny fahasamihafan'ny navigateur taloha. Fotoana izay mbola Internet Explorer no navigateur nanjaka indrindra, ary Firefox no faharoa akaiky, saingy nanomboka very ny tsena noho ny Chrome nahazo laza haingana. Na dia nahay nifanaraka tsara tamin'ny fenitry ny tranonkala aza ny Chrome sy Firefox, ny tontolo iainan'ny fampiharana anay dia midika fa tsy maintsy nanohana ny IE6 izahay nandritra ny fotoana ela. Na dia navela hanohana ny IE8 aza izahay, dia mbola tsy maintsy niatrika fahasamihafan'ny navigateur. Tsy izany ihany, fa ny tranonkala tamin'izany fotoana izany dia tsy nanana fahaiza-manao maro natsangana teo amin'ny lampihazo.

Mandroso haingana anio. Niova be ny toe-javatra. Tsy vitan'ny hoe manana ireo fahaiza-manao ireo mihoatra noho ny teo aloha isika, fa nitombo ihany koa ny tahan'ny fahazoana azy ireo. Mamelà ahy hametraka ny fanontaniana indray, avy eo: Hanampy anao amin'izao fotoana izao ve ny fanokanana fotoana hianarana bebe kokoa momba ny fomba fiasan'ny tranonkala sy ny zavatra hita ao amin'ny lampihazo? Eny tanteraka. Ny fianarana hahatakatra sy hampiasa ny sehatra tranonkala ankehitriny dia manome tombony lehibe anao amin'ny mpamorona hafa. Na miasa amin'ny fampisehoana ianao, ny fahafahana miditra, ny fandraisana andraikitra, ireo rehetra ireo miaraka, na ny fandefasana ireo endri-javatra UI fotsiny, raha te hanao izany amin'ny maha-injeniera tompon'andraikitra anao ianao, ny fahalalanao ireo fitaovana azo omena anao dia manampy anao hahatratra ny tanjonao haingana kokoa sy tsara kokoa. Zavatra sasany mety tsy ilanao tranomboky intsony Ny fahafantarana izay tohanan'ny navigateur amin'izao fotoana izao, ny fanontaniana dia hoe: Inona no azontsika atao? Mila singa div ve isika hanaovana zoro boribory amin'ny 2025? Mazava ho azy fa tsy manao izany isika. Ny fananana sisintany-radius dia notohanan'ny navigateur rehetra ampiasaina amin'izao fotoana izao nandritra ny 15 taona mahery amin'izao fotoana izao. Ary ho avy tsy ho ela koa ny endriky ny zoro, ho an'ny zoro tsara kokoa. Andeha hojerentsika ireo endri-javatra vao haingana izay hita amin'ny navigateur lehibe rehetra, ary azonao ampiasaina hanoloana ny fiankinan-doha efa misy ao amin'ny codebase-nao. Ny tanjona dia ny tsy hanary avy hatrany ny tranomboky malalanao rehetra ary hamerina manoratra ny codebase-nao. Raha ny amin'ny zavatra hafa rehetra, mila maka ny fanohanan'ny navigateur aloha ianao ary manapa-kevitra mifototra amin'ny antony hafa manokana amin'ny tetikasanao. Ireto endri-javatra manaraka ireto dia ampiharina amin'ny motera navigateur telo lehibe (Chromium, WebKit, ary Gecko), saingy mety manana fepetra fanohanana navigateur hafa ianao izay manakana anao tsy hampiasa azy ireo avy hatrany. Mbola fotoana tsara hianarana momba ireo endri-javatra ireo anefa izao, ary angamba mikasa ny hampiasa azy ireo amin'ny fotoana iray. Popovers sy Dialogues Ny Popover API, ny singa HTML

, ary ny ::backdrop pseudo-element dia afaka manampy anao hanala ny fiankinan-doha amin'ny popup,fitaovana, ary tranomboky fifanakalozan-dresaka, toy ny Floating UI, Tippy.js, Tether, na React Tooltip. Izy ireo dia mitantana ny fidirana sy ny fitantanana fifantohana ho anao, ivelan'ny boaty, dia azo zahana amin'ny fampiasana CSS, ary azo alaina mora foana. Accordions Ny singa
, ny anarany anarana ho an'ny singa miavaka, ary ny ::details-content pseudo-element dia manala ny filana singa akorandriaka toy ny Bootstrap Accordion na ny singa React Accordion. Ny fampiasana fotsiny ny sehatra eto dia midika fa mora kokoa ho an'ny olona mahay HTML/CSS ny mahazo ny kaodinao nefa tsy mila mianatra mampiasa tranomboky manokana. Midika koa izany fa tsy afa-miala amin'ny fanovana ao amin'ny tranomboky ianao na ny fampitsaharana io tranomboky io. Ary mazava ho azy, midika izany fa kely kokoa ny kaody azo alaina sy mihazakazaka. Tsy mila JS hanokafana, hanakatona, na hamelomana ny singa tsirairay amin'ny antsipiriany. CSS Syntax Ny sosona cascade, ho an'ny codebase CSS voalamina kokoa, CSS nesting, ho an'ny CSS mirindra kokoa, fiasa loko vaovao, loko mifandraika, ary loko-mix, ny fiasa Matematika vaovao toy ny abs(), sign(), pow() ary ny hafa dia manampy amin'ny fampihenana ny fiankinan-doha amin'ny CSS pre-processors, trano famakiam-boky ilaina toa an'i Bootstrap sy Tailwind, na tranomboky CSS-in-JS aza. Ny mpilalao changer :has(), iray amin'ireo endri-javatra tena angatahina hatry ny ela, dia manaisotra ny filana vahaolana mifototra amin'ny JS sarotra kokoa. JS Utilities Ny fomba maoderina Array toa ny findLast (), na amin'ny (), ary koa ny fomba Set toy ny difference(), intersection(), union() ary ny hafa dia afaka mampihena ny fiankinan-doha amin'ny tranomboky toa an'i Lodash. Fanontaniana fitahirizana Ny fangatahan'ny container dia mahatonga ny singa UI mamaly zavatra hafa ankoatra ny haben'ny seranan-tsambo, ka mahatonga azy ireo ho azo ampiasaina kokoa amin'ny toe-javatra samihafa. Tsy mila mampiasa tranomboky UI mavesatra JS ho an'izany intsony, ary tsy mila mampiasa polyfill koa. Layout Ny Grid, ny subgrid, ny flexbox, na ny tsanganana maro dia efa nisy hatry ny ela, saingy raha jerena ny valin'ny fanadihadiana momba ny State of CSS, dia mazava fa ny mpamorona dia mazàna mitandrina tsara amin'ny fandraisana zava-baovao, ary miandry ela be vao manao izany. Ireo endri-javatra ireo dia Baseline hatry ny ela ary azonao ampiasaina izy ireo hanesorana ny fiankinan-doha amin'ny zavatra toy ny rafitra grid Bootstrap, ny fitaovana flexbox an'ny Foundation Framework, Bulma fixed grid, Materialize grid, na tsanganana Tailwind. Tsy milaza aho fa tokony hanary ny rafitrao ianao. Nandray izany ny ekipanao noho ny antony iray, ary mety ho tetikasa lehibe ny fanesorana azy. Saingy ny fijerena izay azon'ny sehatra web atolotra raha tsy misy fonon'antoko fahatelo eo ambony dia mitondra tombony betsaka. Zavatra mety tsy ilainao intsony ato ho ato Ankehitriny, andeha hojerentsika haingana ny sasany amin'ireo zavatra tsy ilainao ho an'ny tranomboky tsy ho ela. Izany hoe, ireo zavatra etsy ambany ireo dia tsy tena vonona amin'ny fananganana faobe, fa ny fahafantarana azy ireo sy ny fiomanana amin'ny fampiasana any aoriana dia mety hanampy. Fametrahana vatofantsika Ny fametrahan'ny vatofantsika CSS dia mitantana ny fametrahan'ny popovers sy ny toro-hevitra mifandraika amin'ny singa hafa, ary mikarakara ny fitazonana azy ireo ho hita maso, na dia mihetsika, mikoriana, na manova ny haben'ny pejy aza. Ity dia famenoana lehibe ho an'ny Popover API voalaza teo aloha, izay hanamora kokoa ny fifindra-monina hiala amin'ny vahaolana JS mazoto kokoa. Navigation API Ny API Navigation dia azo ampiasaina hitantana ny fitetezana amin'ny rindranasa pejy tokana ary mety ho famenoana lehibe, na fanoloana mihitsy aza, amin'ny React Router, Next.js routing, na asa zotra angular. Jereo ny Transitions API Ny API View Transitions dia afaka mihetsiketsika eo anelanelan'ny toetry ny pejy iray. Amin'ny rindranasa tokana pejy iray dia manamora ny fifindrana mirindra eo amin'ny fanjakana izany ary afaka manampy anao hanaisotra ireo tranomboky sarimiaina toy ny Anime.js, GSAP, na Motion.dev. Na tsara kokoa aza, ny API dia azo ampiasaina amin'ny fampiharana pejy marobe. Tadidinao teo aloha, rehefa nilaza aho fa ny antony nanangananay fampiharana pejy tokana tao amin'ny orinasa niasako 15 taona lasa izay dia ny hisorohana ny tselatra fotsy amin'ny famerenana ny pejy rehefa mivezivezy? Raha nisy io API io tamin'izany fotoana izany, dia ho afaka nahazo vokatra tsara amin'ny fifindrana pejy tsy misy rafitra pejy tokana ary tsy misy fampidinana voalohany ny fampiharana manontolo. Horonan-taratasy Animations Ny sary mihetsika entin'ny horonan-taratasy dia mandeha amin'ny toeran'ny horonam-bokin'ny mpampiasa, fa tsy rehefa mandeha ny fotoana, ka mahatonga azy ireo ho vahaolana tsara ho an'ny fitantarana tantara sy fitsangatsanganana vokatra. Ny olona sasany dia lasa ambony noho izany, fa rehefa ampiasaina tsara dia mety ho fitaovana famolavolana tena mahomby izany, ary afaka manampy amin'ny fanesorana ireo tranomboky toy ny: ScrollReveal, GSAP Scroll, naWOW.js. Safidy azo zahana Ny fifantenana azo amboarina dia singa

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free