ווי צו נוצן CSS ספּרייץ מיט ליכט און פינצטער מאָדע
קסס ספּריטעס זענען אַ טעכניק געניצט אין וועב אַנטוויקלונג צו רעדוצירן די נומער פון הטטפּ ריקוועס געמאכט דורך אַ וועב בלאַט. זיי אַרייַנציען קאַמביינינג קייפל קליין בילדער אין אַ איין גרעסערע בילד טעקע און דערנאָך ניצן CSS צו ווייַזן ספּעציפיש סעקשאַנז פון דעם בילד ווי יחיד עלעמענטן אויף די וועב בלאַט.
די ערשטיק נוץ פון ניצן CSS ספּרייץ איז אַז זיי קענען העלפֿן פֿאַרבעסערן די בלאַט לאָדן צייט פֿאַר אַ וועבזייטל. יעדער מאָל אַ בילד איז לאָודיד אויף אַ וועב בלאַט, עס ריקווייערז אַ באַזונדער הטטפּ בעטן, וואָס קענען פּאַמעלעך די לאָודינג פּראָצעס. דורך קאַמביינינג קייפל בילדער אין אַ איין ספּרייט בילד, מיר קענען רעדוצירן די נומער פון הטטפּ ריקוועס צו מאַסע די בלאַט. דאָס קען רעזולטאַט אין אַ פאַסטער און מער אָפּרופיק וועבזייטל, ספּעציעל פֿאַר זייטלעך מיט פילע קליין בילדער ווי ייקאַנז און קנעפּלעך.
ניצן CSS ספּריטעס אויך אַלאַוז אונדז צו נוצן בלעטערער קאַטשינג. ווען אַ באַניצער באזוכט אַ וועבזייטל, זייער בלעטערער וועט קאַש די ספּרייט בילד נאָך דער ערשטער בעטן. דעם מיטל אַז סאַבסאַקוואַנט ריקוועס פֿאַר יחיד עלעמענטן אויף די וועב בלאַט וואָס נוצן די ספּרייט בילד וועט זיין פיל פאַסטער זינט דער בלעטערער וועט האָבן די בילד אין זיין קאַש.
CSS ספּרייץ זענען נישט ווי פאָלקס ווי זיי אַמאָל געווען
CSS ספּריטעס זענען נאָך קאַמאַנלי געניצט צו פֿאַרבעסערן פּלאַץ גיכקייַט, כאָטש זיי קען נישט זיין ווי פאָלקס ווי זיי אַמאָל געווען. ווייַל פון הויך באַנדווידט, וועבפּ פֿאָרמאַטירונגען, בילד קאַמפּרעשאַן, אינהאַלט עקספּרעס נעטוואָרקס (קדן), פויל לאָודינג, און שטאַרק קאַטשינג טעקנאַלאַדזשיז, מיר טאָן ניט זען ווי פילע CSS ספּריטעס ווי מיר געוויינט צו אויף די וועב ... כאָטש עס איז נאָך אַ גרויס סטראַטעגיע. דאָס איז ספּעציעל נוציק אויב איר האָבן אַ בלאַט וואָס רעפערס צו אַ פּלאַץ פון קליין בילדער.
CSS ספּרייט בייַשפּיל
צו נוצן CSS ספּריטעס, מיר דאַרפֿן צו דעפינירן די שטעלע פון יעדער יחיד בילד אין די ספּרייט בילד טעקע ניצן CSS. דעם איז טיפּיקלי געטאן דורך באַשטעטיקן די background-image
און background-position
פּראָפּערטיעס פֿאַר יעדער עלעמענט אויף די וועב בלאַט וואָס ניצט די ספּרייט בילד. דורך ספּעציפיצירן די X און y קאָואָרדאַנאַץ פון די בילד אין די ספּרייט, מיר קענען אַרויסווייַזן יחיד בילדער ווי באַזונדער עלעמענטן אויף דעם בלאַט. דאָ ס אַ בייַשפּיל ... מיר האָבן צוויי קנעפּלעך אין אַ איין בילד טעקע:
אויב מיר ווילן די בילד אויף די לינקס צו זיין געוויזן, מיר קענען צושטעלן די דייוו 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
. דאָס קען מאַכן עס שווער צו שטעלן יחיד בילדער אין די ספּרייט בילד טעקע.