צבע הבחירה ב- css3: בחרו צבע, ושנו את כל האתר!

אתם רוצים שהאתר שלכם ייראה מעודכן, נכון? אז אחרי שלמדתם להשתמש בפונטים מגניבים באתר שלכם, יש עוד דבר מגניב שתוכלו לעשות: לשנות את צבע "הבחירה".

אחד הדברים המגניבים שיש ב- css3, הלא הוא תקן ה-css החדש, זה שינוי צבע הבחירה.
אם עד לא מזמן בכל הדפדפנים אפשר היה להעתיק טקסט -או יותר נכון לבחור אותו- רק בצבע התכלת הבהיר המשעמם, ובכן, לא עוד. כעת, עם תקן ה-css3 (שכבר פה די ממזמן, זה רק שהדפדפנים התחילו לתמוך בו בצורה נרחבת…), הדפדפנים יציגו את צבע הבחירה שתגדירו לו. וזה ממש ממש קל.

מה זה "צבע הבחירה"?
נו, באמת. כל משתשמש אינטרנט יודע מה זה. זה הצבע שמופיע כשרוצים להעתיק (ולהדביק אח"כ) קטע טקסט או לסמן משהו חשוב לרגע בדפדפן האינטרנט.

למה לשנות אותו?
1. ככה. כי בא לי!
2. כי עכשיו אפשר. כל הדפדפנים הנורמליים כבר תומכים בזה!
3. כי זה נראה מעודכן.
4. ואולי הכי חשוב: עיצובית- כי ניתן כך לעשות התאמת צבעים יותר אבסולוטית לצבעי האתר!

מה הם דרישות המערכת?

בגדול, רק דפדפני פי.סי. חדשים יכולים להציג את הפיצ'ר הזה. אל תנסו עם איכספלורר 7 ומטה. (ולא שאני נגד, אני סתם מתעלם..). יותר מאשמח לתגובות איך נראה אצלכם!

טוב. הבנתי, הבנתי. איך עושים את זה?

אז קדימה, לעבודה!

1. פתחו את קובץ ה-css של האתר. אם חילקתם את האתר לכמה קבצי css (האמת שלא כדאי. אם אינכם חייבים לעשות זאת, תחסכו לעצמכם את הבעיה המיותרת הזאת..), פתחו את הראשי, הזה שמתייחס בואו נגיד לתג ה-Body.

2. כל שעליכם לעשות הוא להדביק את 2 השורות הבאות לתוך קוד ה- css שלכם, ולשמור:

::selection {background: #e59b3b;}
::-moz-selection {background: #ffb400;}

* שימו לב שאתם שמים את השורה לא באמצע הגדרה, זאת אומרת מחוץ לסוגריים.
** המספר אחרי הסולמית ממחיש את הצבע. המספר להלן הוא סוג של כתום. ניתן גם לכתוב red#, או green# וכו'
*** השורה השנייה היא אותה ההגדרה, אך לדפדפן מוזילה פיירפוקס, שצריך להיות מיוחד…
**** ניתן להגדיר את הבחירה גם לסלקטורים, ולתגיות html מסויומות כמו <p> וכו', אבל אני יותר אוהב אחידות. כל האתר, או כלום. ההגדרה שכתבתי היא לכל האתר.

3. זה הכל!

4. תהנו.