עורך ה-CSS החדש שהוצג ב- VS 11 למעשה הינו שכתוב מלא של העורך הישן מגרסה 2010, והוא מתאפיין בשלל יכולות חדשות, ביציבות ובביצועים מעולים. ברגע שתתחילו לערוך קובץ CSS או בלוק Style, תרגישו את ההבדל!
תקן CSS 3.0 הרחיב במידה ניכרת את העושר והמורכבות של ה- style sheets, והעורך החדש מסייע בניהול ובייעול של השינויים הללו. במאמר זה אתאר את החידושים העיקריים בעורך החדש.
השלמה אוטומאטית (Intellisense)
נתחיל בכך שהעורך החדש מאפשר לנו לבחור את תקן ה- CSS שאנו רוצים לעבוד מולו. מאד נוח למי שלא רוצה לעבוד בברירת המחדל (CSS 3.0) אלא בתקן ישן יותר.
לאחר שבחרנו את תקן ה- CSS איתו נעבוד, הדבר הראשון שתראו הוא מספרם המדהים של המאפיינים הזמינים, למעלה מ-250 מאפיינים. אם תתחילו את שם המאפיין במקף ("-"), תקבלו אף מאפיינים הספציפיים של הדפדפנים השונים. העורך כולל תמיכה במאפיינים ספציפיים של דפדפני IE באמצעות ms prefix, דפדפני מוזילה כגון FireFox באמצעות moz prefix וכן דפדפנים המבוססים על מנוע WebKit (תחילית –webkit) כגון Chrome ו-Safari.
אף כי הרשימה מדהימה בעושרה, ברגע שתתחילו להקליד, תיחתך הרשימה ויוצגו התכונות התואמות לאותיות שהוקלדו. שימו לב גם ל-tooltips שמקבלים במעבר על המאפיין.

בנוסף, אם תקלידו את האות הראשונה של כל מילה כשהיא מופרדת במקף, תקבלו קיצור דרך לצמצום הרשימה, כך שניתן לבחור שם מאפיין, כמו text-decoration-color, באמצעות הקלדת האותיות "tdc". כשתקלידו נקודתיים, יופיע שם המאפיין המלא:

כברירת מחדל לא תקבלו השלמה אוטומאטית של המאפיינים הספציפיים של הדפדפנים. כדי לקבלם בכל זאת, תתחילו במקף:

בנוסף, בזמן ההקלדה ניתן לוותר על המקפים, וההשלמה האוטומאטית עדיין תעבוד כצפוי:

Color Picker
במידה והמאפיין צפוי לקבל ערך מסוג צבע, העורך יקפיץ את ה-Color Picker החדש.

הוא כולל פלטה רגילה של צבעים, יחד עם רשימת צבעים שהיו בשימוש לאחרונה, ו-Color Picker מפורט שנפתח בלחיצה על שני חצים למטה. באופן טבעי, הוא תומך בשמות צבעים סטנדרטיים, ב-hash codes ובצבעים בפורמטים RGB, RGBA, HSL, HSLA, ואף מאפשר לבחור צבע על ידי הצבעה על תמונה.

Smart & Hierarchical Indent
ה-formatter מציג כעת אינדנטציה היררכית (אותה ניתן לכבות בתפריט Tools/Options, לבחירתכם) ההופכת קבצי CSS שופעים במיוחד לקריאים יותר:

כמו כן, פתיחת סוגר מסולסל (}) תשלים את הסוגר ({) ותבצע אינדנטציה למאפיינים שבתוך הבלוק.
תמיכה בהאקים
שימו לב שהאינדנטציה בשורה האחרונה מודעת להאק ומתעלמת ממנו בדירוג ההיררכי. כך שאם יש לכם קבצים שמסתמכים על האקים, התכונה הזאת בהחלט שימושית. אם לא שמעתם עליהם, חפשו בבינג CSS Hacks, או פשוט התעלמו מהם.
גם ההאקים של מאפייני CSS בהחלט זוכים כאן למלוא הכבוד.גם הם זוכים לתמיכת IntelliSense מלאה:
תמיכה ב-Snippets
ה-CSS editor הוא עכשיו אותו העורך שמשמש לעריכת קוד ו-HTML, ככזה הוא תומך ב-Snippets. אלה שימושיים מאוד כאשר, לדוגמא, יש צורך להגדיר מספר מאפיינים עבור דפדפנים שונים. לדוגמא, להגדרת מאפיין column-gap, הקלידו cg ואז לחצו פעמיים tab.
הקלידו "8px" ולחצו על מקש Enter, וערכי כל מאפיינים יוגדרו כ-8px. הסמן יעבור אוטומטית להכנסת המאפיין הבא. כמובן שתוכלו להגדיר Snippets משלכם, בדיוק כמו שהייתם יכולים לעשות זאת עבור קוד.
תמיכה ב-Regions
כמו בכל עורך בתוך Visual Studio, גם כאן תקבלו יכולת הגדרת Regions וכן regions אוטומטיים בהתבבסס על בלוקי הגדרות CSS הניתנים לכיווץ:
קיימת גם תמיכה ב-Inline Regions – regions מיוחדים ללא שם, אשר הגדרתם אינה נשמרת בקוד אלא בקובץ .SUO מקומי, אשר לא מועבר ל-source control. בכך כל מפתח יכול ליצור regions שנוחים לו, מבלי לחשוש שהמפתחים האחרים בצוות לא יאהבו את ה-region. התכונה הזאת קיימת בעורך קוד של Visual Studio החל מגרסת 2010. על מנת ליצור inline region, מסמנים כל בלוק שרוצים ומקישים את הרצף Ctrl-M Ctrl-H (Hide). רצף מקשים Ctrl-M Ctrl-U (unhide) יבטל את ה-inline region:
Block Commenting
בנוסף, קיבלנו גם יכולת להפוך כל בלוק להערה על ידי הקשת רצף מקשים Ctrl-K Ctrl-C (comment), וכן ביטול ההערה על ידי סימון ההערה והקשת רצף מקשים: Ctrl-K Ctrl-U (uncomment). כמו כן, פתיחת הערה על ידי הקלדת /* מיד תשלים את */.
סיכום
הגרסה החדשה של Visual Studio מביאה איתה עורך CSS חדש ועשיר, בעל יכולות חזקות ביותר המשתוות ליכולות של עורך קוד ומשפרות את הפרודוקטיביות הן ביצירת CSS חדשים והן בתחזוקת קבצי CSS קיימים. העורך החדש הופך את החוויה לנעימה הרבה יותר, וזה כבר שווה את מעבר לגרסת Visual Studio חדשה!..
הורידו והתנסו ללא תשלום בגרסה החדשה של Visual Studio 11 Beta
הפוסט נכתב ע"י ולאד אזארכין ,מהנדס תמיכת Premier למפתחים (PFE), וכן מוביל טכנולוגי בתחום פיתוח Web ב-EMEA. בין יתר ההתמחויות, ולאד הוא מומחה בתחום ביצועים, ניטור, health, ו-troubleshooting של מערכות Web. בעבר ולאד היה יועץ פיתוח תוכנה, שימש בתפקידי ניהול טכנולוגי בכירים, הציג בכנסים וניהל קבוצת משתמשים.
אם יש לכם שאלות נוספות בנושא VS, אתם מוזמנים לבקר אותנו בפורום Visual Studio.