הגדרת עיצוב שונה לקישורים יוצאים ב CSS

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

זה לכשעצמו מצויין, קישורים יוצאים משפרים את חווית המשתמש כאשר משתמשים באלו נכון. עם זאת, נוכחתי לדעת כי אין לי את הדרך להבדיל בין קישור יוצא באתר לקישור פנימי וזה די הציק לי.

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

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

דרך פשוטה להטמיע זאת היא באמצעות Pseudo element ב CSS המטרגט אך ורק קישורים בהם לא קיימת הכתובת savvy.co.il כבדוגמה הבאה:

article a[href*="//"]:not([href*="savvy.co.il"]):after {
    content: "";
    width: 11px;
    height: 11px;
    margin-right: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f9db46' class='bi bi-box-arrow-up-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.364 3.5a.5.5 0 0 1 .5-.5H14.5A1.5 1.5 0 0 1 16 4.5v10a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 3 14.5V7.864a.5.5 0 1 1 1 0V14.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5H7.864a.5.5 0 0 1-.5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 0 1H1.707l8.147 8.146a.5.5 0 0 1-.708.708L1 1.707V5.5a.5.5 0 0 1-1 0v-5z'/%3E%3C/svg%3E");    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin-left: 2px;
}

בדוגמה זו אנו מטרגטים אך ורק את הקישורים הנמצאים בתוך האלמנט <article> הקיים בעמוד, כך שלא תהיה השפעה על קישורים בתפריט הניווט, בפוטר וכדומה.

האייקון בו השתמשתי הוא האייקון הבא מספריית האייקונים של Bootstrap, אך אתם יכולים להשתמש כמובן בכל אייקון שרק תרצו. בכדי להמיר את ה SVG ל data:image השתמשתי בשירות של URL-encoder for SVG.

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

יש לכם פתרון אחר? האם אתם מסכימים שעיצוב הקישורים החיצוניים באופן קצת שונה יכול לשפר את חווית המשתמש במקרים אלו? אשמח אם תאמרו את דעתכם בתגובות.. 🙂