מיט 15 יאָר צוריק, איך געארבעט אין אַ פירמע ווו מיר געבויט אַפּפּס פֿאַר רייזע אגענטן, אַעראָפּאָרט טוערס און ערליין קאָמפּאַניעס. מיר אויך געבויט אונדזער אייגענע פריימווערק פֿאַר וי קאַמפּאָונאַנץ און איין-בלאַט אַפּ קייפּאַבילאַטיז. מיר האָבן קאַמפּאָונאַנץ פֿאַר אַלץ: פעלדער, קנעפּלעך, טאַבס, ריינדזשאַז, דאַטן טאַבלעס, מעניוז, דאַטע פּיקקערס, סעלעקץ און מולטיסעלעקץ. מיר אפילו האָבן אַ דייוו קאָמפּאָנענט. אונדזער div קאָמפּאָנענט איז דורך דעם וועג גרויס, עס ערלויבט אונדז צו מאַכן ראַונדיד עקן אויף אַלע בראַוזערז, וואָס, גלויבן עס אָדער נישט, איז נישט אַן גרינג זאַך צו טאָן אין דער צייט.
אונדזער אַרבעט איז פארגעקומען אין אַ פונט אין אונדזער געשיכטע ווען JS, Ajax און דינאַמיש HTML זענען געזען ווי אַ רעוואָלוציע וואָס געבראכט אונדז אין דער צוקונפֿט. פּלוצלינג, מיר קען דערהייַנטיקן אַ בלאַט דינאַמיש, באַקומען דאַטן פון אַ סערווער און ויסמיידן צו נאַוויגירן צו אנדערע בלעטער, וואָס איז געווען געזען ווי פּאַמעלעך און פלאַשט אַ גרויס ווייַס גראָדעק אויף דעם עקראַן צווישן די צוויי בלעטער. עס איז געווען אַ פראַזע, געמאכט פאָלקס דורך Jeff Atwood (דער גרינדער פון StackOverflow), וואָס לייענען: "יעדער אַפּלאַקיישאַן וואָס קענען זיין געשריבן אין דזשאַוואַסקריפּט וועט יווענטשאַוואַלי זיין געשריבן אין דזשאַוואַסקריפּט." - Jeff Atwood
פֿאַר אונדז אין דער צייט, דאָס פּעלץ ווי אַ אַרויספאָדערן צו טאַקע גיין און מאַכן די אַפּפּס. עס פּעלץ ווי אַ פאַרדעקן האַסקאָמע צו טאָן אַלץ מיט JS. אַזוי מיר האָבן אַלץ מיט JS, און מיר האָבן נישט טאַקע נעמען די צייט צו פאָרשונג אנדערע וועגן צו טאָן טינגז. מיר האָבן ניט טאַקע פילן די ינסעניוו צו לערנען וואָס HTML און CSS קענען טאָן. מיר האָבן ניט טאַקע באמערקט די וועב ווי אַ יוואַלווינג אַפּ פּלאַטפאָרמע אין זיין ינטייערמאַנט. מיר מערסטנס געזען עס ווי עפּעס וואָס מיר דאַרפֿן צו אַרבעטן אַרום, ספּעציעל ווען עס קומט צו בלעטערער שטיצן. מיר קען נאָר וואַרפן מער JS אין עס צו באַקומען די טינגז. וואָלט מיר געהאָלפֿן נעמען די צייט צו לערנען מער וועגן ווי די וועב געארבעט און וואָס איז בנימצא אויף דער פּלאַטפאָרמע? זיכער, איך קען מיסטאָמע האָבן שייווד אַ בינטל פון קאָד וואָס איז נישט טאַקע דארף. אָבער, אין דער צייט, אפֿשר נישט אַזוי פיל. איר זען, בלעטערער דיפעראַנסיז זענען געווען שיין באַטייַטיק צוריק. דאָס איז געווען אַ צייט ווען Internet Explorer איז נאָך געווען דער דאָמינאַנט בלעטערער, מיט פירעפאָקס איז געווען דער נאָענט רגע, אָבער סטאַרטינג צו פאַרלירן מאַרק טיילן רעכט צו קראָום ראַפּאַדלי גיינינג פּאָפּולאַריטעט. כאָטש קראָום און פירעפאָקס זענען גאַנץ גוט צו שטימען אויף וועב סטאַנדאַרדס, די ינווייראַנמאַנץ אין וואָס אונדזער אַפּפּס זענען פליסנדיק מענט אַז מיר האָבן צו שטיצן IE6 פֿאַר אַ לאַנג צייַט. אפילו ווען מיר זענען ערלויבט צו שטיצן IE8, מיר נאָך האָבן צו האַנדלען מיט אַ פּלאַץ פון דיפעראַנסיז צווישן בראַוזערז. ניט בלויז דאָס, אָבער די וועב פון די צייט האט נישט האָבן אַזוי פילע קייפּאַבילאַטיז געבויט רעכט אין דער פּלאַטפאָרמע.
שנעל פאָרויס צו הייַנט. דאס האט זיך שטארק געטוישט. ניט בלויז מיר האָבן מער פון די קייפּאַבילאַטיז ווי אלץ פריער, אָבער די קורס אין וואָס זיי ווערן בנימצא איז אויך געוואקסן. לאָזן מיר פרעגן די קשיא ווידער, דעריבער: וואָלט נעמען די צייט צו לערנען מער וועגן ווי די וועב אַרבעט און וואָס איז בנימצא אויף דער פּלאַטפאָרמע העלפֿן איר הייַנט? אַבסאָלוט יאָ. לערנען צו פֿאַרשטיין און נוצן די וועב פּלאַטפאָרמע הייַנט שטעלט איר אַ ריזיק מייַלע איבער אנדערע דעוועלאָפּערס. צי איר אַרבעט אויף פאָרשטעלונג, אַקסעסאַביליטי, ריספּאַנסיוונאַס, אַלע פון זיי צוזאַמען, אָדער נאָר שיפּינג UI פֿעיִקייטן, אויב איר ווילן צו טאָן דאָס ווי אַ פאַראַנטוואָרטלעך ינזשעניר, וויסן די מכשירים וואָס זענען בארעכטיגט פֿאַר איר העלפּס איר דערגרייכן דיין גאָולז פאַסטער און בעסער. עטלעכע טינגז איר קען נישט דאַרפֿן אַ ביבליאָטעק פֿאַר ענימאָר אויב איר וויסן וואָס בראַוזערז שטיצן הייַנט, די קשיא איז: וואָס קענען מיר דיטש? צי מיר דאַרפֿן אַ דייוו קאָמפּאָנענט צו מאַכן ראַונדיד עקן אין 2025? פון קורס, מיר טאָן ניט. די גרענעץ ראַדיוס פאַרמאָג איז געשטיצט דורך אַלע איצט געוויינט בראַוזערז פֿאַר מער ווי 15 יאָר אין דעם פונט. און װינקל־פֿאָרם קומט אױך באַלד, פֿאַר נאָך פֿאַנטאַסטיקע װינקלען. לאָמיר נעמען אַ קוק אין לעפיערעך פריש פֿעיִקייטן וואָס זענען איצט בנימצא אין אַלע הויפּט בראַוזערז, און וואָס איר קענען נוצן צו פאַרבייַטן יגזיסטינג דיפּענדאַנסיז אין דיין קאָדעבאַסע. די פונט איז נישט צו מיד דיטש אַלע דיין באליבטע לייברעריז און רירייט דיין קאָדעבאַסע. ווי פֿאַר אַלץ אַנדערש, איר וועט דאַרפֿן צו נעמען בלעטערער שטיצן אין חשבון ערשטער און באַשליסן באזירט אויף אנדערע סיבות ספּעציפיש צו דיין פּרויעקט. די פאלגענדע פֿעיִקייטן זענען ימפּלאַמענאַד אין די דריי הויפּט בלעטערער ענדזשאַנז (Chromium, WebKit און Gecko), אָבער איר קען האָבן פאַרשידענע בלעטערער שטיצן רעקווירעמענץ וואָס פאַרמייַדן איר צו נוצן זיי גלייך. איצט איז נאָך אַ גוט צייַט צו לערנען וועגן די פֿעיִקייטן, און טאָמער פּלאַנירן צו נוצן זיי אין עטלעכע פונט. פּאָפּאָווערס און דיאַלאָגס די פּאָפּאָווער אַפּי, די <דיאַלאָג> HTML עלעמענט, און די :: באַקדראַפּ פּסעוודאָ-עלעמענט קענען העלפֿן איר באַקומען באַפרייַען פון די דעפּענדאַנסיז אויף אויפֿשפּרינג,tooltip און דיאַלאָג לייברעריז, אַזאַ ווי Floating UI, Tippy.js, Tether אָדער React Tooltip. זיי שעפּן אַקסעסאַביליטי און פאָקוס פאַרוואַלטונג פֿאַר איר, אויס פון די קעסטל, זענען העכסט קוסטאָמיזאַבלע דורך ניצן CSS, און קענען לייכט זיין אַנימאַטעד. אַקאָרדיאַנז די <דעטאַילס> עלעמענט, זיין נאָמען אַטריביוט פֿאַר מיוטשואַלי ויסשליסיק עלעמענטן, און די :: פרטים-אינהאַלט פּסעוודאָ-עלעמענט באַזייַטיקן די נויט פֿאַר אַקאָרדיאַן קאַמפּאָונאַנץ ווי די באָאָצטראַפּ אַקאָרדיאַן אָדער די רעאַקט אַקאָרדיאַן קאָמפּאָנענט. נאָר ניצן די פּלאַטפאָרמע דאָ מיטל אַז עס איז גרינגער פֿאַר מענטשן וואָס וויסן HTML / CSS צו פֿאַרשטיין דיין קאָד אָן ערשטער צו לערנען צו נוצן אַ ספּעציפיש ביבליאָטעק. דאָס אויך מיטל אַז איר זענט ימיון צו ברייקינג ענדערונגען אין דער ביבליאָטעק אָדער די דיסקאַנטיניויישאַן פון דער ביבליאָטעק. און, פון קורס, עס מיטל ווייניקער קאָד צו אָפּלאָדירן און לויפן. מיוטשואַלי ויסשליסיק דעטאַילס עלעמענטן טאָן ניט דאַרפֿן JS צו עפֿענען, פאַרמאַכן אָדער ופלעבן. CSS סינטאַקס קאַסקאַדע לייַערס, פֿאַר אַ מער אָרגאַניזירט CSS קאָדעבאַסע, CSS נעסטינג, פֿאַר מער סאָליד CSS, נייַ קאָליר פאַנגקשאַנז, קאָרעוו פארבן און קאָליר מישן, נייַ מאַטהס פאַנגקשאַנז ווי אַבס (), צייכן (), פּאָו () און אנדערע העלפֿן רעדוצירן די דיפּענדאַנסיז אויף CSS פאַר-פּראַסעסערז, נוצן לייברעריז ווי Bootstrap און Tailwind, אָדער אפילו רונטימע CSS-ליבראַריעס. די שפּיל טשאַנגער :has(), איינער פון די מערסט געבעטן פֿעיִקייטן פֿאַר אַ לאַנג צייַט, רימוווז די נויט פֿאַר מער קאָמפּליצירט JS-באזירט סאַלושאַנז. JS Utilities מאָדערן מענגע מעטהאָדס ווי findLast (), אָדער ביי (), ווי געזונט ווי באַשטעטיק מעטהאָדס ווי חילוק (), ינטערסעקשאַן (), יוניאַן () און אנדערע קענען רעדוצירן דיפּענדאַנסיז אויף לייברעריז ווי לאָדאַש. Container Queries קאַנטיינער קוויריז מאַכן וי קאַמפּאָונאַנץ רעספּאָנד צו זאכן אנדערע ווי די וויופּאָרט גרייס, און דעריבער מאַכן זיי מער ריוזאַבאַל אין פאַרשידענע קאַנטעקסץ. ניט דאַרפֿן צו נוצן אַ JS-שווער וי ביבליאָטעק פֿאַר דעם ענימאָר, און ניט דאַרפֿן צו נוצן אַ פּאָליפילל. אויסלייג גריד, סובגריד, פלעקסבאָקס אָדער מאַלטי-זייַל האָבן שוין אַרום פֿאַר אַ לאַנג צייַט איצט, אָבער אויב איר קוק אין די רעזולטאַטן פון די שטאַט פון CSS סערווייז, עס איז קלאָר אַז דעוועלאָפּערס טענד צו זיין זייער אָפּגעהיט מיט אַדאַפּטינג נייַע טינגז און וואַרטן פֿאַר אַ זייער לאַנג צייט איידער זיי טאָן דאָס. די פֿעיִקייטן האָבן שוין באַסעלינע פֿאַר אַ לאַנג צייַט און איר קען נוצן זיי צו באַקומען באַפרייַען פון דיפּענדאַנסיז אויף טינגז ווי די באָאָטסטראַפּ גריד סיסטעם, די פלעקסבאָקס יוטילאַטיז פון Foundation Framework, Bulma פאַרפעסטיקט גריד, מאַטעריאַליזע גריד אָדער טיילווינד שפאלטן. איך טאָן ניט זאָגן איר זאָל פאַרלאָזן דיין פריימווערק. דיין מאַנשאַפֿט אנגענומען עס פֿאַר אַ סיבה, און רימוווינג עס קען זיין אַ גרויס פּרויעקט. אָבער צו קוקן אין וואָס די וועב פּלאַטפאָרמע קענען פאָרשלאָגן אָן אַ דריט-פּאַרטיי ראַפּער אויף שפּיץ קומט מיט אַ פּלאַץ פון בענעפיץ. טינגז איר קען נישט דאַרפֿן ענימאָר אין דער נאָענט צוקונפֿט איצט, לאָזן אונדז נעמען אַ שנעל קוק אין עטלעכע פון די טינגז פֿאַר וואָס איר וועט נישט דאַרפֿן אַ ביבליאָטעק אין דעם לעבן צוקונפֿט. דאָס איז צו זאָגן, די טינגז אונטן זענען נישט גאַנץ גרייט פֿאַר מאַסע קינדער, אָבער זיין אַווער פון זיי און פּלאַנירונג פֿאַר פּאָטענציעל שפּעטער נוצן קענען זיין נוציק. אַנקער פּאַזישאַנינג CSS אַנקער פּאַזישאַנינג כאַנדאַלז די פּאַזישאַנינג פון פּאָפּאָווערס און טאָאָלטיפּס קאָרעוו צו אנדערע עלעמענטן, און נעמט זאָרגן צו האַלטן זיי אין מיינונג, אפילו ווען מאָווינג, סקראָללינג אָדער רעסיזינג די בלאַט. דאָס איז אַ גרויס דערגאַנג צו די Popover API דערמאנט פריער, וואָס וועט מאַכן עס אפילו גרינגער צו מייגרייט אַוועק פון מער פאָרשטעלונג-אינטענסיווע JS סאַלושאַנז. נאַוויגאַציע אַפּי די נאַוויגאַציע אַפּי קענען ווערן גענוצט צו שעפּן נאַוויגאַציע אין איין-בלאַט אַפּפּס און קען זיין אַ גרויס דערגאַנג, אָדער אפילו אַ פאַרבייַט, צו רעאַקט ראַוטער, Next.js רוטינג אָדער ווינקלדיק רוטינג טאַסקס. View Transitions API די View Transitions API קענען ופלעבן צווישן די פאַרשידענע שטאַטן פון אַ בלאַט. אין אַ איין-בלאַט אַפּלאַקיישאַן, דאָס מאכט גלאַט טראַנזישאַנז צווישן שטאַטן זייער גרינג, און קענען העלפֿן איר באַקומען באַפרייַען פון אַנאַמיישאַן לייברעריז אַזאַ ווי Anime.js, GSAP אָדער Motion.dev. אפילו בעסער, די API קענען אויך זיין געוויינט מיט קייפל בלאַט אַפּלאַקיישאַנז. געדענקט איר פריער, ווען איך געזאגט אַז די סיבה וואָס מיר געבויט איין-בלאַט אַפּפּס אין די פירמע ווו איך געארבעט 15 יאָר צוריק איז געווען צו ויסמיידן די ווייַס בליץ פון בלאַט רילאָודז ווען נאַוואַגייטינג? אויב די API איז געווען בנימצא אין דער צייט, מיר וואָלט האָבן געווען ביכולת צו דערגרייכן שיין בלאַט יבערגאַנג יפעקץ אָן אַ איין-בלאַט פריימווערק און אָן אַ ריזיק ערשט אראפקאפיע פון די גאנצע אַפּ. מעגילע-געטריבן אַנאַמיישאַנז סקראָל-געטריבן אַנאַמיישאַנז לויפן אויף דער באַניצער 'ס מעגילע שטעלע, אלא ווי איבער צייַט, מאכן זיי אַ גרויס לייזונג פֿאַר דערציילונג און פּראָדוקט טאָורס. עטלעכע מענטשן האָבן אַ ביסל איבער די שפּיץ מיט עס, אָבער ווען געוויינט געזונט, דאָס קען זיין אַ זייער עפעקטיוו פּלאַן געצייַג און קענען העלפֿן באַקומען באַפרייַען פון לייברעריז ווי: ScrollReveal, GSAP Scroll, אָדערWOW.js. קוסטאָמיזאַבלע סאַלעקץ א קוסטאָמיזאַבלע אויסקלייַבן איז אַ נאָרמאַל <סעלעקט> עלעמענט וואָס לעץ איר גאָר קאַסטאַמייז זייַן אויסזען און אינהאַלט, בשעת ינשורינג אַקסעסאַביליטי און פאָרשטעלונג בענעפיץ. דאָס איז געווען אַ לאַנג צייַט קומען, און אַ העכסט געבעטן שטריך, און עס איז אַמייזינג צו זען עס קומען צו די וועב פּלאַטפאָרמע באַלד. מיט אַ געבויט-אין קוסטאָמיזאַבלע אויסקלייַבן, איר קענען לעסאָף דיטש אַלע דעם שווער-צו-וישאַלט JS קאָד פֿאַר דיין מנהג סעלעקט קאַמפּאָונאַנץ. CSS מאַסאָנרי CSS מאַסאָנרי איז אן אנדער אַפּקאַמינג וועב פּלאַטפאָרמע שטריך וואָס איך ווילן צו פאַרברענגען מער צייט אויף. מיט CSS מאַסאָנרי, איר קענען דערגרייכן לייאַוץ וואָס זענען זייער שווער, אָדער אפילו אוממעגלעך, מיט פלעקס, גריד אָדער אנדערע געבויט-אין CSS אויסלייג פּרימיטיווז. דעוועלאָפּערס אָפט נוצן דריט-פּאַרטיי לייברעריז צו דערגרייכן מאַסאָנרי לייאַוץ, אַזאַ ווי די Masonry JS ביבליאָטעק. אָבער, מער וועגן דעם שפּעטער. לאָמיר ייַנוויקלען דעם פונט איידער איר מאַך אויף צו מאַסאָנרי. פארוואס איר זאָל זאָרגן דער אַרבעט מאַרק איז פול פון וועב דעוועלאָפּערס מיט דערפאַרונג אין דזשאַוואַסקריפּט און די לעצטע פראַמעוואָרקס פון דעם טאָג. אַזוי, טאַקע, וואָס איז די פונט צו לערנען צו נוצן די פּרימיטיווז פון די וועב פּלאַטפאָרמע מער, אויב איר קענען טאָן די זעלבע טינגז מיט די לייברעריז, יוטילאַטיז און פראַמעוואָרקס איר שוין וויסן הייַנט? ווען אַ גאַנץ אינדוסטריע רילייז אויף די פראַמעוואָרקס, און איר קענען נאָר ציען די רעכט ביבליאָטעק, זאָל ניט בלעטערער ווענדאָרס נאָר אַרבעטן מיט די לייברעריז צו מאַכן זיי לאָדן און לויפן פאַסטער, אלא ווי טריינג צו איבערצייגן דעוועלאָפּערס צו נוצן די פּלאַטפאָרמע אַנשטאָט? ערשטער פון אַלע, מיר אַרבעט מיט ביבליאָטעק מחברים, און מיר מאַכן פראַמעוואָרקס בעסער דורך לערנען וועגן וואָס זיי נוצן און פֿאַרבעסערן די געביטן. אבער צווייטנס, "נאָר ניצן די פּלאַטפאָרמע" קענען ברענגען שיין באַטייַטיק בענעפיץ. שיקט ווייניקער קאָד צו דעוויסעס דער הויפּט נוץ איז אַז איר סוף אַרויף שיקט פיל ווייניקער קאָד צו דיין קלייאַנץ 'דיווייסאַז. לויט די 2024 וועב אַלמאַנאַק, די דורכשניטלעך נומער פון הטטפּ ריקוועס איז אַרום 70 פּער פּלאַץ, רובֿ פון וואָס איז רעכט צו דזשאַוואַסקריפּט מיט 23 ריקוועס. אין 2024, JS אויך אָוווערטוק בילדער ווי די דאָמינאַנט טעקע טיפּ. די מידיאַן נומער פון בלאַט ריקוועס פֿאַר JS טעקעס איז 23, אַרויף צו 8% זינט 2022. און בלאַט גרייס האלט צו וואַקסן יאָר איבער יאָר. די דורכשניטלעך בלאַט וואָג איז אַרום 2MB איצט, וואָס איז 1.8MB מער ווי עס איז געווען 10 יאָר צוריק.
זיכער, דיין אינטערנעט פֿאַרבינדונג גיכקייַט איז מיסטאָמע אויך געוואקסן, אָבער דאָס איז נישט דער פאַל פֿאַר אַלעמען. און ניט אַלעמען האט די זעלבע מיטל קייפּאַבילאַטיז. צוציען דריט-פּאַרטיי קאָד פֿאַר טינגז וואָס איר קענען טאָן מיט דער פּלאַטפאָרמע, אַנשטאָט, מיסטאָמע מיטל אַז איר שיקן מער קאָד, און דעריבער דערגרייכן ווייניקערע קאַסטאַמערז ווי איר נאָרמאַלי וואָלט. אויף די וועב, שלעכט לאָודינג פאָרשטעלונג פירט צו גרויס אַבאַנדאַנמאַנט רייץ און כערץ סאָרט שעם. פליסנדיק ווייניקער קאָד אויף דעוויסעס דערצו, דער קאָד וואָס איר שיקן אויף דיין קאַסטאַמערז 'דיווייסאַז מיסטאָמע לויפט פאַסטער אויב עס ניצט ווייניקערע דזשאַוואַסקריפּט אַבסטראַקציעס אויף שפּיץ פון דער פּלאַטפאָרמע. עס איז אויך מיסטאָמע מער אָפּרופיק און מער צוטריטלעך דורך פעליקייַט. אַלע דעם פירט צו מער און כאַפּיער קאַסטאַמערז. קוק מיין קאָלעגע אַלעקס רוססעלל ס יערלעך פאָרשטעלונג ינאַקוואַלאַטי גאַפּ בלאָג, וואָס ווייזט אַז פּרעמיע דעוויסעס זענען לאַרגעלי ניטאָ פון מארקפלעצער מיט ביליאַנז פון יוזערז רעכט צו עשירות ינאַקוואַלאַטי. און דעם ריס איז בלויז גראָוינג איבער צייַט.
געבויט-אין מאַסאָנרי אויסלייג איין וועב פּלאַטפאָרמע שטריך וואָס קומט באַלד און וואָס איך בין זייער יקסייטאַד וועגן איז CSS מאַסאָנרי.
זאל מיר אָנהייבן מיט דערקלערן וואָס מאַסאָנרי איז. וואָס איז מאַסאָנרי מאַסאָנרי איז אַ טיפּ פון אויסלייג וואָס איז געווען פאָלקס דורך פּינטערעסט מיט יאָרן צוריק. עס קריייץ פרייַ טראַקס פון אינהאַלט אין וואָס זאכן פּאַקן זיך ווי נאָענט צו די אָנהייב פון דער שפּור ווי זיי קענען.
פילע מענטשן זען מאַסאָנרי ווי אַ גרויס אָפּציע פֿאַר פּאָרטפאָוליאָוז און פאָטאָ גאַלעריז, וואָס עס אַוואַדע קענען טאָן. אָבער מאַסאָנרי איז מער פלעקסאַבאַל ווי וואָס איר זען אויף פּינטערעסט, און עס איז נישט לימיטעד צו בלויז וואַסערפאַל-ווי לייאַוץ. אין אַ מאַסאָנרי אויסלייג:
טראַקס קענען זיין שפאלטן אָדער ראָוז:
אינהאַלט טראַקס טאָן ניט אַלע האָבן צו זיין די זעלבע גרייס:
ייטאַמז קענען שפּאַן קייפל טראַקס:
זאכן קענען זיין געשטעלט אויף ספּעציפיש טראַקס; זיי טאָן ניט האָבן צו שטענדיק נאָכגיין די אָטאַמאַטיק פּלייסמאַנט אַלגערידאַם:
דעמאָס דאָ זענען אַ ביסל פּשוט דעמאָס איך געמאכט מיט די אַפּקאַמינג ימפּלאַמענטיישאַן פון CSS מאַסאָנרי אין Chromium. א פאָטאָ גאַלעריע דעמאָ, וואָס ווייַזן ווי זאכן (דער טיטל אין דעם פאַל) קענען שפּאַן קייפל טראַקס:
אן אנדער פאָטאָ גאַלעריע וואָס ווייַזן טראַקס פון פאַרשידענע סיזעס:
א נייעס פּלאַץ אויסלייג מיט עטלעכע טראַקס ברייט ווי אנדערע, און עטלעכע זאכן ספּאַנסינג די גאנצע ברייט פון די אויסלייג:
א קאַנבאַן ברעט וואָס ווייזט אַז זאכן קענען זיין געשטעלט אויף ספּעציפיש טראַקס:
באַמערקונג: דיפריערדיקע דעמאָס זענען געמאכט מיט אַ ווערסיע פון Chromium וואָס איז נאָך נישט בארעכטיגט פֿאַר רובֿ וועב ניצערס, ווייַל CSS מאַסאָנרי איז נאָר פּונקט סטאַרטינג צו זיין ימפּלאַמענאַד אין בראַוזערז. אָבער, וועב דעוועלאָפּערס האָבן שוין גליק ניצן לייברעריז צו שאַפֿן מאַסאָנרי לייאַוץ פֿאַר יאָרן שוין. זייטלעך ניצן מאַסאָנרי הייַנט טאַקע, מאַסאָנרי איז שיין פּראָסט אויף די וועב הייַנט. דאָ זענען עטלעכע ביישפילן וואָס איך געפֿונען אַחוץ פּינטערעסט:
און אַ ביסל מער, ווייניקער קלאָר ווי דער טאָג, ביישפילן:
אַזוי, ווי זענען די לייאַוץ באשאפן? וואָרקאַראָונדס איין טריק וואָס איך ווע געזען געוויינט איז ניצן אַ פלעקסבאָקס אויסלייג אַנשטאָט, טשאַנגינג זייַן ריכטונג צו זייַל און באַשטעטיקן עס צו ייַנוויקלען. דעם וועג, איר קענען שטעלן זאכן פון פאַרשידענע כייץ אין קייפל, פרייַ שפאלטן, געבן דעם רושם פון אַ מאַסאָנרי אויסלייג:
עס זענען, אָבער, צוויי לימיטיישאַנז מיט דעם וואָרקאַראָונד:
דער סדר פון זאכן איז אַנדערש פון וואָס עס וואָלט זיין מיט אַ פאַקטיש מאַסאָנרי אויסלייג. מיט פלעקסבאָקס, זאכן פּלאָמבירן דער ערשטער זייַל ערשטער און, ווען עס איז פול, גיין צו דער ווייַטער זייַל. מיט מאַסאָנרי, זאכן וואָלט אָנלייגן אין וועלכער שפּור (אָדער זייַל אין דעם פאַל) האט מער פּלאַץ בנימצא. אָבער אויך, און טאָמער מער ימפּאָרטאַנטלי, דעם וואָרקאַראָונד ריקווייערז אַז איר שטעלן אַ פאַרפעסטיקט הייך צו די פלעקסבאָקס קאַנטיינער; אַנדערש, קיין ראַפּינג וואָלט פּאַסירן.
דריט-פּאַרטיי מאַסאָנרי ליבראַריעס פֿאַר מער אַוואַנסירטע קאַסעס, דעוועלאָפּערס האָבן געוויינט לייברעריז. די מערסט באַוווסט און פאָלקס ביבליאָטעק פֿאַר דעם איז פשוט גערופן מאַסאָנרי, און עס איז דאַונלאָודיד וועגן 200,000 מאל פּער וואָך לויט NPM. Squarespace אויך גיט אַ אויסלייג קאָמפּאָנענט וואָס רענדערז אַ מאַסאָנרי אויסלייג, פֿאַר אַ ניט-קאָד אנדער ברירה, און פילע זייטלעך נוצן עס. ביידע פון די אָפּציעס נוצן דזשאַוואַסקריפּט קאָד צו שטעלן זאכן אין די אויסלייג. געבויט-אין מאַסאָנרי איך בין טאַקע יקסייטאַד אַז מאַסאָנרי איז איצט סטאַרטינג צו דערשייַנען אין בראַוזערז ווי אַ געבויט-אין CSS שטריך. מיט צייט, איר וועט קענען צו נוצן מאַסאָנרי פּונקט ווי איר טאָן גריד אָדער פלעקסבאָקס, דאָס איז, אָן קיין וואָרקאַראָונדס אָדער דריט-פּאַרטיי קאָד. מייַן מאַנשאַפֿט אין מייקראָסאָפֿט האט ימפּלאַמענאַד אַ געבויט-אין מאַסאָנרי שטיצן אין די קראָומיאַם עפֿענען מקור פּרויעקט, וואָס עדזש, קראָום און פילע אנדערע בראַוזערז זענען באזירט אויף. מאָזיללאַ איז פאקטיש געווען דער ערשטער בלעטערער פאַרקויפער צו פאָרשלאָגן אַן יקספּערמענאַל ימפּלאַמענטיישאַן פון מאַסאָנרי צוריק אין 2020. און עפּל איז אויך געווען זייער אינטערעסירט אין מאַכן דעם נייַ פּרימיטיוו וועב אויסלייג פּאַסירן. די אַרבעט צו סטאַנדערדייז די שטריך איז אויך פאָרויס, מיט העסקעם אין די CSS אַרבעט גרופּע וועגן די אַלגעמיינע ריכטונג און אפילו אַ נייַע אַרויסווייַזן טיפּ: גריד-ליינז. אויב איר ווילן צו לערנען מער וועגן מאַסאָנרי און שפּור פּראָגרעס, טשעק מיין CSS מאַסאָנרי רעסורסן בלאַט. אין צייט, ווען מאַסאָנרי ווערט אַ באַסעלינע שטריך, פּונקט ווי גריד אָדער פלעקסבאָקס, מיר קענען פשוט נוצן עס און נוץ פון:
בעסער פאָרשטעלונג, בעסער ענטפער, יז פון נוצן און סימפּלער קאָד.
זאל ס נעמען אַ נעענטער קוק אין די. בעסער פאָרשטעלונג מאַכן דיין אייגענע מאַסאָנרי-ווי אויסלייג סיסטעם, אָדער ניצן אַ דריט-פּאַרטיי ביבליאָטעק אַנשטאָט, מיטל איר וועט האָבן צו לויפן דזשאַוואַסקריפּט קאָד צו שטעלן זאכן אויף דעם עקראַן. דאָס אויך מיטל אַז דער קאָד וועט זיין בלאַקינג. טאַקע, גאָרנישט וועט דערשייַנען, אָדער די טינגז וועט נישט זיין אין די רעכט ערטער אָדער די רעכט סיזעס ביז די דזשאַוואַסקריפּט קאָד איז לויפן. מאַסאָנרי אויסלייג איז אָפט געניצט פֿאַר די הויפּט טייל פון אַ וועב בלאַט, וואָס מיטל אַז דער קאָד וועט מאַכן דיין הויפּט אינהאַלט דערשייַנען שפּעטער ווי עס קען אַנדערש האָבן, דיגריידינג דיין LCP אָדער Largest Contentful Paint מעטריק, וואָס שפּילט אַ גרויס ראָלע אין דערקענט פאָרשטעלונג און זוכן מאָטאָר אַפּטאַמאַזיישאַן. איך טעסטעד די Masonry JS ביבליאָטעק מיט אַ פּשוט אויסלייג און סימיאַלייטינג אַ פּאַמעלעך 4G פֿאַרבינדונג אין DevTools. די ביבליאָטעק איז נישט זייער גרויס (24KB, 7.8KB gzipped), אָבער עס גענומען 600ms צו מאַסע אונטער מיין פּרובירן טנאָים. דאָ איז אַ פאָרשטעלונג רעקאָרדינג וואָס ווייזן אַז לאַנג 600ms לאָדן צייט פֿאַר די מאַסאָנרי ביבליאָטעק, און אַז קיין אנדערע רענדערינג טעטיקייט איז געשען בשעת דאָס איז געווען געשעעניש:
אין אַדישאַן, נאָך דער ערשט לאָדן צייט, די דאַונלאָודיד שריפט דארף זיין פּאַרסעד, קאָמפּילעד און לויפן. אַלע פון וואָס, ווי דערמאנט פריער, בלאַקינג די רענדערינג פון די בלאַט. מיט אַ געבויט-אין מאַסאָנרי ימפּלאַמענטיישאַן אין דעם בלעטערער, מיר וועלן נישט האָבן אַ שריפט צו מאַסע און לויפן. דער בלעטערער מאָטאָר וועט נאָר טאָן זיין זאַך בעשאַס די ערשט בלאַט רענדערינג שריט. בעסער ריספּאַנסיוונאַס ענלעך צו ווען אַ בלאַט ערשטער לאָודז, רעסיזינג די בלעטערער פֿענצטער פירט צו רענדערינג די אויסלייג אין דעם בלאַט ווידער. אין דעם פונט, אָבער, אויב דער בלאַט ניצט די Masonry JS ביבליאָטעק, עס איז ניט דאַרפֿן צו לאָדן דעם שריפט ווידער, ווייַל עס איז שויןדאָ. אָבער, דער קאָד וואָס באוועגט זאכן אין די רעכט ערטער דאַרף לויפן. איצט דעם באַזונדער ביבליאָטעק סימז צו זיין שיין שנעל צו טאָן דאָס ווען די בלאַט לאָודז. אָבער, עס אַנאַמייץ די זאכן ווען זיי דאַרפֿן צו מאַך צו אַ אַנדערש אָרט אין די גרייס פון פֿענצטער, און דאָס מאכט אַ גרויס חילוק. פון קורס, יוזערז טאָן ניט פאַרברענגען צייט צו רעסיזע זייער בלעטערער פֿענצטער ווי פיל ווי די דעוועלאָפּערס טאָן. אָבער דעם אַנימאַטעד רעסיזינג דערפאַרונג קענען זיין שיין דזשאַרינג און מוסיף צו די באמערקט צייט עס נעמט פֿאַר די בלאַט צו אַדאַפּט צו זיין נייַע גרייס. יז פון נוצן און סימפּלער קאָד ווי גרינג עס איז צו נוצן אַ וועב שטריך און ווי פּשוט די קאָד קוקט זענען וויכטיק סיבות וואָס קענען מאַכן אַ גרויס חילוק פֿאַר דיין מאַנשאַפֿט. זיי קענען קיינמאָל זיין ווי וויכטיק ווי די לעצט באַניצער דערפאַרונג, פון קורס, אָבער דעוועלאָפּער דערפאַרונג ימפּאַקץ מאַינטאַינאַביליטי. ניצן אַ געבויט-אין וועב שטריך קומט מיט וויכטיק בענעפיץ אויף דעם פראָנט:
דעוועלאָפּערס וואָס שוין וויסן HTML, CSS, און JS וועט רובֿ מסתּמא קענען צו נוצן דעם שטריך לייכט ווייַל עס איז דיזיינד צו ויסשטימען געזונט און זיין קאָנסיסטענט מיט די רעשט פון די וועב פּלאַטפאָרמע. עס איז קיין ריזיקירן פון ברייקינג ענדערונגען אין ווי די שטריך איז געניצט. עס איז כּמעט נול ריזיקירן אַז די שטריך וועט זיין דיפּרישיייטיד אָדער אַנמיינטיינד.
אין דעם פאַל פון געבויט-אין מאַסאָנרי, ווייַל עס איז אַ פּרימיטיוו אויסלייג, איר נוצן עס פֿון CSS, פּונקט ווי גריד אָדער פלעקסבאָקס, קיין JS ינוואַלווד. אויך, אנדערע אויסלייג-פֿאַרבונדענע CSS פּראָפּערטיעס, אַזאַ ווי ריס, אַרבעט ווי איר וואָלט דערוואַרטן. עס זענען קיין טריקס אָדער וואָרקאַראָונדס צו וויסן וועגן, און די טינגז וואָס איר לערנען זענען דאַקיומענטאַד אויף MDN. פֿאַר די Masonry JS lib, יניטיאַליזאַטיאָן איז אַ ביסל קאָמפּליצירט: עס ריקווייערז אַ דאַטן אַטריביוט מיט אַ ספּעציפיש סינטאַקס, צוזאַמען מיט פאַרבאָרגן HTML עלעמענטן צו שטעלן די זייַל און ריס סיזעס. פּלוס, אויב איר ווילן צו שפּאַן שפאלטן, איר דאַרפֿן צו אַרייַננעמען די ריס גרייס זיך צו ויסמיידן פּראָבלעמס:
<סקריפּט src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"> <סטייל> .track-sizer, .ייטם { ברייט: 20%; } .גוטער-סיזער { ברייט: 1רעם; } .ייטם { הייך: 100פּקס; גרענעץ-בלאָק-סוף: 1רעם; } .ייטם:nth-child(מאָדנע) { הייך: 200פּקס; } .item--width2 { ברייט: קאַלק(40% + 1רעם); }
זאל ס פאַרגלייַכן דעם צו וואָס אַ געבויט-אין מאַסאָנרי ימפּלאַמענטיישאַן וואָלט קוקן ווי: <סטייל> .container { אַרויסווייַזן: גריד-ליינז; גריד-ליינז: איבערחזרן (4, 20%); ריס: 1רעם; } .ייטם { הייך: 100פּקס; } .ייטם:nth-child(מאָדנע) { הייך: 200פּקס; } .item--width2 { גריד-זייַל: שפּאַן 2; }
סימפּלער, מער סאָליד קאָד וואָס קענען נאָר נוצן טינגז ווי ריס און ווו ספּאַנינג טראַקס איז דורכגעקאָכט מיט שפּאַן 2, פּונקט ווי אין גריד, און טוט נישט דאַרפן איר צו רעכענען די רעכט ברייט וואָס כולל די ריס גרייס. ווי צו וויסן וואָס איז בנימצא און ווען עס איז בנימצא? קוילעלדיק, די קשיא איז נישט טאַקע אויב איר זאָל נוצן אַ געבויט-אין מאַסאָנרי איבער אַ JS ביבליאָטעק, אָבער גאַנץ ווען. די Masonry JS ביבליאָטעק איז אַמייזינג און האט שוין פילונג אַ ריס אין די וועב פּלאַטפאָרמע פֿאַר פילע יאָרן, און פֿאַר פילע צופרידן דעוועלאָפּערס און יוזערז. עס האט אַ ביסל דיסאַדוואַנטידזשיז אויב איר פאַרגלייַכן עס צו אַ געבויט-אין מאַסאָנרי ימפּלאַמענטיישאַן, פון קורס, אָבער דאָס איז נישט וויכטיק אויב די ימפּלאַמענטיישאַן איז נישט גרייט. עס איז גרינג פֿאַר מיר צו רשימה די קיל נייַ וועב פּלאַטפאָרמע פֿעיִקייטן ווייַל איך אַרבעט אין אַ בלעטערער פאַרקויפער, און איך טענד צו וויסן וואָס קומט. אָבער דעוועלאָפּערס אָפט טיילן, יבערבליק נאָך יבערבליק, אַז בעכעסקעם שפּור פון נייַע טינגז איז שווער. עס איז שווער צו בלייבן ינפאָרמד, און קאָמפּאַניעס טאָן ניט שטענדיק פּרייאָראַטייז לערנען. צו העלפן מיט דעם, דאָ זענען אַ ביסל רעסורסן וואָס צושטעלן דערהייַנטיקונגען אין פּשוט און סאָליד וועגן אַזוי איר קענען באַקומען די אינפֿאָרמאַציע איר דאַרפֿן געשווינד:
די וועב פּלאַטפאָרמע פֿעיִקייטן Explorer פּלאַץ: איר קען זיין אינטערעסירט אין זיין מעלדונג הערות בלאַט. און, אויב איר ווי RSS, טשעק די מעלדונג נאָטעס פיטער, ווי געזונט ווי די באַסעלינע ניי בנימצא און וויידלי בנימצא פידז.
די וועבפּלאַטפאָרמע סטאַטוס דאַשבאָרד: איר קען ווי די פאַרשידן באַסעלינע יאָר בלעטער.
די ראָאַדמאַפּ בלאַט פון Chrome Platform Status.
אויב איר האָט אַ ביסל מער צייט, איר קען אויך זיין אינטערעסירט אין מעלדונג הערות פון בלעטערער ווענדאָרס:
קראָום עדזש פירעפאָקס סאַפאַרי
פֿאַר אפילו מער רעסורסן, טשעק מיין נאַוויגאַציע אויף די וועב פּלאַטפאָרם טשיץשעעט. מייַן זאַך איז נאָך נישט ימפּלאַמענאַד דאָס איז די אנדערע זייַט פון די פּראָבלעם. אפילו אויב איר געפֿינען די צייט, ענערגיע און וועגן צו האַלטן שפּור, עס איז נאָך פראַסטריישאַן מיט באַקומען דיין קול געהערט און ימפּלאַמענאַד דיין באַליבסטע פֿעיִקייטן. אפֿשר איר האָט שוין ווארטן פֿאַר יאָרן פֿאַר אַ ספּעציפיש זשוק צו זיין ריזאַלווד, אָדער אַ ספּעציפיש שטריך צו שיקן אין אַ בלעטערער ווו עס איז נאָך פעלנדיק. וואָס איך וועט זאָגן איז בלעטערער ווענדאָרס טאָן הערן. איך בין אַ טייל פון עטלעכע קרייַז-אָרגאַניזאַציע טימז ווו מיר דיסקוטירן דעוועלאָפּער סיגנאַלז און באַמערקונגען אַלע די צייט. מיר קוקן אין פילע פאַרשידענע קוואלן פון באַמערקונגען, ביידע ינערלעך ביי יעדער בלעטערער פאַרקויפער און פונדרויסנדיק / ציבור אויף גרופּעס, אָפֿן מקור פּראַדזשעקס, בלאָגס און סערווייז. און, מיר שטענדיק טריינג צו שאַפֿן בעסער וועגן פֿאַר דעוועלאָפּערס צו טיילן זייער ספּעציפיש באדערפענישן און נוצן קאַסעס. אַזוי, אויב איר קענען, ביטע מאָנען מער פון בלעטערער ווענדאָרס און דרוק אונדז צו ינסטרומענט די פֿעיִקייטן איר דאַרפֿן. איך באַקומען אַז עס נעמט צייט, און קען אויך זיין ינטימידייטינג (ניט צו דערמאָנען אַ הויך שלאַבאַן צו פּאָזיציע), אָבער עס אויך אַרבעט. דאָ זענען עטלעכע וועגן איר קענען באַקומען דיין (אָדער דיין פירמע) קול געהערט: נעמען די יערלעך שטאַט פון JS, שטאַט פון CSS און שטאַט פון HTML סערווייז. זיי שפּילן אַ גרויס ראָלע אין ווי בלעטערער ווענדאָרס פּרייאָראַטייז זייער אַרבעט. אויב איר דאַרפֿן אַ ספּעציפיש נאָרמאַל-באזירט אַפּי צו זיין ימפּלאַמענאַד קאַנסיסטאַנטלי אַריבער בראַוזערז, באַטראַכטן פאָרלייגן אַ פאָרשלאָג אין דער ווייַטער ינטעראָפּ פּרויעקט יטעראַטיאָן. עס ריקווייערז מער צייט, אָבער באַטראַכטן ווי Shopify און RUMvision שערד זייער ווינטשן רשימות פֿאַר ינטעראָפּ 2026. דיטיילד אינפֿאָרמאַציע ווי דאָס קען זיין זייער נוציק פֿאַר בלעטערער ווענדאָרס צו פּרייאָראַטייז. פֿאַר מער נוציק פֿאַרבינדונגען צו השפּעה פון בלעטערער ווענדאָרס, טשעק מיין נאַוויגאַציע אויף די וועב פּלאַטפאָרם טשיץשעעט. מסקנא צו פאַרמאַכן, איך האָפֿן דעם אַרטיקל האט לאָזן איר מיט אַ ביסל טינגז צו טראַכטן וועגן:
יקסייטמאַנט פֿאַר מאַסאָנרי און אנדערע אַפּקאַמינג וועב פֿעיִקייטן. עטלעכע וועב פֿעיִקייטן איר זאל וועלן צו אָנהייבן ניצן. עטלעכע שטיק פון מנהג אָדער 3rd-פּאַרטיי קאָד איר קען זיין ביכולת צו באַזייַטיקן אין טויווע פון געבויט-אין פֿעיִקייטן. עטלעכע וועגן צו האַלטן שפּור פון וואָס קומט און השפּעה פון בלעטערער ווענדאָרס.
מער ימפּאָרטאַנטלי, איך האָפֿן איך האָבן קאַנווינסט איר פון די בענעפיץ פון ניצן די וועב פּלאַטפאָרמע צו זיין פול פּאָטענציעל.
