פאַרגיכערן דיין פּלאַץ מיט CSS ספּריטעס

ספּריטעמאַסטער וועב

איך שרייב אַ ביסל וועגן דעם בלאַט גיכקייט אויף דעם פּלאַץ, און דאָס איז אַ וויכטיק טייל פון די אַנאַליסיס און ימפּרווומאַנץ וואָס מיר מאַכן אויף אונדזער זייטלעך. חוץ פון מאָווינג צו שטאַרק סערווערס און ניצן מכשירים ווי אינהאַלט עקספּרעס נעטוואָרקס, עס זענען עטלעכע אנדערע פּראָגראַממינג טעקניקס וואָס די דורכשניטלעך וועב דעוועלאָפּער קענען נוצן.

דער סטאַנדאַרט פֿאַר דער אָריגינעל קאַסקאַדינג סטייל בלאַט איז איצט מער ווי 15 יאָר אַלט. CSS איז געווען אַ וויכטיק עוואָלוציע אין וועב אַנטוויקלונג ווייַל עס אפגעשיידט אינהאַלט פון פּלאַן. קוק אויף דעם בלאָג און קיין אנדערע, און די מערהייט פון די סטילינג חילוק איז פשוט אין די אַטאַטשט סטילעשעעט. סטילעשעעץ זענען אויך וויכטיק ווייַל זיי זענען סטאָרד לאָוקאַלי אין אַ קאַש אין דיין בלעטערער. דעריבער, ווען מענטשן פאָרזעצן צו באַזוכן דיין פּלאַץ, זיי טאָן ניט דאַונלאָודינג אַ נוסח בלאַט יעדער מאָל ... נאָר די בלאַט אינהאַלט.

איין עלעמענט פון CSS וואָס איז אָפט אַנדעריוטאַלייזד זענען CSS ספּריטעס. ווען אַ באַניצער באזוכט דיין וועבזייטל, איר קען נישט פאַרשטיין אַז זיי טאָן ניט נאָר מאַכן איין בעטן פֿאַר דעם בלאַט. זיי מאַכן קייפל ריקוועס... אַ בעטן פֿאַר די בלאַט, פֿאַר סטייל שיץ, פֿאַר אַטאַטשט דזשאַוואַסקריפּט טעקעס און יעדער בילד. אויב איר האָט אַ טעמע וואָס האט אַ סעריע פון ​​בילדער פֿאַר געמארקן, נאַוויגאַציע באַרס, באַקגראַונדז, קנעפּלעך, אאז"ו ו ... דער בלעטערער דאַרף צו בעטן יעדער איינער פון די וועב סערווער. מערן דאָס דורך טויזנטער וויזאַטערז און עס קען זיין טענס פון טויזנטער פון ריקוועס צו דיין סערווירער!

אין דעם קער, דיין פּלאַץ סלאָוז אַראָפּ. א פּאַמעלעך פּלאַץ קען האָבן אַ דראַמאַטיק פּראַל אויף די באַשטעלונג און קאַנווערזשאַנז אַז דיין וילעם מאכט. א סטראַטעגיע וואָס גרויס וועב דעוועלאָפּערס נוצן איז צו שטעלן אַלע די בילדער אין אַ איין טעקע ... גערופן אַ ספּרייט. אלא ווי צו מאַכן אַ בקשה פֿאַר יעדער פון דיין טעקע בילדער, איצט עס דאַרף נאָר זיין אַ איין בעטן פֿאַר די איין ספּרייט בילד!

איר קענען לייענען וועגן ווי CSS ספּריטעס אַרבעט אין CSS-Tricks or סמסינג מאַגאַזין ס CSS ספּרייט פּאָסטן. מייַן פונט איז נישט צו ווייַזן איר ווי צו נוצן זיי, נאָר צו רעקאָמענדירן איר צו ענשור אַז דיין אַנטוויקלונג מאַנשאַפֿט ינקאָרפּערייץ זיי אין דעם פּלאַץ. די ביישפּיל אַז CSS טריקס גיט 10 בילדער וואָס זענען 10 ריקוועס און לייגן אַרויף צו 20.5 קב. ווען אלנגעזאמלט אין אַ איין ספּרייט, עס ס 1 בעטן אַז ס 13 קב! די קייַלעכיק יאַזדע בעטן און ענטפער מאָל פֿאַר 9 בילדער זענען איצט ניטאָ און די סומע פון ​​דאַטן איז רידוסט דורך מער ווי 30%. מערן דאָס מיט די נומער פון וויזאַטערז אויף דיין פּלאַץ און איר וועט טאַקע גאָלן עטלעכע רעסורסן אַוועק!

globalnavדי עפּל נאַוויגאַציע באַר איז אַ גרויס בייַשפּיל. יעדער קנעפּל האט אַ ביסל שטאַטן ... צי איר זענט אויף דעם בלאַט, אַוועק די בלאַט אָדער מאַוזינג איבער דעם קנעפּל. CSS דיפיינז די קאָואָרדאַנאַץ פון די קנעפּל און גיט די געגנט פון די ריכטיק שטאַט צו די בלעטערער. אַלע די שטאַטן זענען קאַלאַפּסט צוזאַמען אין אַ איין גראַפיק - אָבער געוויזן געגנט דורך געגנט ווי ספּעסאַפייד אין די נוסח בלאַט.

אויב דיין דעוועלאָפּערס ליבע מכשירים, עס זענען אַ פּלאַץ וואָס קענען העלפֿן זיי, אַרייַנגערעכנט די קאָמפּאַס קסס פריימווערק, RequestReduce פֿאַר ASP.NET, קסס-ספּריטער פֿאַר רובי, CSSSprite שריפט פֿאַר Photoshop, ספּריטעפּאַד, ספּרייטרייט, ספּריטעקאָוו, זעראָספּריטעס, די CSS ספּרייט גענעראַטאָר פון Project Fondue, ספּרייט האר וועב, און די ספּרייטמע בוקמאַרקלעט.

Screenshot of ספּרייט האר וועב:
ספּריטעמאַסטער וועב

Martech Zone ניצט נישט הינטערגרונט בילדער איבער די טעמע, אַזוי מיר טאָן ניט האָבן צו נוצן דעם טעכניק אין דעם צייט.

קסנומקס באַמערקונגען

  1. 1

    ווארט ... איז נישט די גאנצע זאַמלונג אַ "בילד" (אָדער אַ "עראָפּלאַן"), און יעדער סאַב-בילד (אָדער סאַב-גרופּע פון ​​בילדער אין די פאַל פון אַנימאַטעד אָדער ינטעראַקטיוולי טשאַנגינג אָנעס) אַ "ספּרייט"?

    אפֿשר די שטאָפּן איז ריניימד זינט די לעצטע מאָל איך כאַנדאַלד דעם סאָרט פון זאַך, אָבער איך קען האָבן געשוואוירן די ספּרייט איז דער עלעמענט וואָס ענדיקט זיך געוויזן, נישט די גרויס דאַטן טיש פֿון וואָס עס איז געווען פּולד.

    ("ספּרייט טיש" ... וואָס איז עס איז נישט עס?)

    • 2

      מיר קען זיין גערעדט צוויי פאַרשידענע טינגז, מארק. מיט CSS, איר קענען בייסיקלי ספּעציפיצירן וואָס 'חלק' פון אַ בילד טעקע צו ווייַזן מיט קאָואָרדאַנאַץ. דאָס אַלאַוז איר צו שטעלן אַלע דיין בילדער אין אַ איין 'ספּרייט' און פּונקט פונט צו די געגנט איר ווילט צו ווייַזן מיט די CSS.

וואָס טאָן איר טראַכטן?

דעם פּלאַץ ניצט אַקיסמעט צו רעדוצירן ספּאַם. לערן ווי דיין קאָמענטאַר דאַטע איז פּראַסעסט.