אינהאַלט מאַרקעטינג

ווי צו נוצן CSS ספּרייץ מיט ליכט און פינצטער מאָדע

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

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

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

CSS ספּרייץ זענען נישט ווי פאָלקס ווי זיי אַמאָל געווען

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

CSS ספּרייט בייַשפּיל

צו נוצן CSS ספּריטעס, מיר דאַרפֿן צו דעפינירן די שטעלע פון ​​​​יעדער יחיד בילד אין די ספּרייט בילד טעקע ניצן CSS. דעם איז טיפּיקלי געטאן דורך באַשטעטיקן די background-image און background-position פּראָפּערטיעס פֿאַר יעדער עלעמענט אויף די וועב בלאַט וואָס ניצט די ספּרייט בילד. דורך ספּעציפיצירן די X און y קאָואָרדאַנאַץ פון די בילד אין די ספּרייט, מיר קענען אַרויסווייַזן יחיד בילדער ווי באַזונדער עלעמענטן אויף דעם בלאַט. דאָ ס אַ בייַשפּיל ... מיר האָבן צוויי קנעפּלעך אין אַ איין בילד טעקע:

CSS ספּרייט בייַשפּיל

אויב מיר ווילן די בילד אויף די לינקס צו זיין געוויזן, מיר קענען צושטעלן די דייוו arrow-left ווי דער קלאַס אַזוי די קאָואָרדאַנאַץ ווייַזן בלויז די זייַט:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

און אויב מיר וועלן צו ווייַזן די רעכט פייַל, מיר וואָלט שטעלן די קלאַס פֿאַר אונדזער דייוו arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

CSS ספּרייץ פֿאַר ליכט און פינצטער מאָדע

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

קסס ספּרייט ליכט טונקל

ניצן CSS, איך קענען אַרויסווייַזן די צונעמען בילד הינטערגרונט באזירט אויף צי דער באַניצער איז ניצן ליכט מאָדע אָדער טונקל מאָדע:

:root {
  --sprite-image: url('sprite.png');
  --sprite-width: 200px;
  --sprite-height: 400px;
  --sprite-x-light: 0;
  --sprite-y-light: 0;
  --sprite-x-dark: -200px;
  --sprite-y-dark: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sprite-x-light: 200px;
    --sprite-x-dark: 0;
  }
}

.icon {
  width: 32px;
  height: 32px;
  background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}

.icon:hover {
  background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}

ויסנעם: E- בריוו קלייאַנץ קען נישט שטיצן דעם

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

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

Douglas Karr

Douglas Karr איז קמאָ פון OpenINSIGHTS און דער גרינדער פון די Martech Zone. דאָוגלאַס האט געהאָלפֿן דאַזאַנז פון געראָטן MarTech סטאַרטאַפּס, אַסיסטאַד אין די רעכט פלייַס פון איבער $ 5 ביל אין Martech אַקוואַזישאַנז און ינוועסטמאַנץ, און האלט צו אַרוישעלפן קאָמפּאַניעס אין ימפּלאַמענינג און אָטאַמייטינג זייער פארקויפונג און פֿאַרקויף סטראַטעגיעס. דאָוגלאַס איז אַן ינטערנאַשאַנאַלי דערקענט דיגיטאַל טראַנספאָרמאַציע און MarTech עקספּערט און רעדנער. דאָוגלאַס איז אויך אַ פארעפנטלעכט מחבר פון אַ דאַמי ס פירער און אַ געשעפט פירערשאַפט בוך.

Related ארטיקלען

צוריק צו שפּיץ קנעפּל
נאָענט

אַדבלאָקק דיטעקטאַד

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