חיפוש ]

הגדרת עיצוב שונה לקישורים יוצאים ב 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 יכולה להוות פתרון מצויין לסיטואציה זו, אך לצערי תמיכת הדפדפנים בזו עדיין אינה רחבה מספיק.

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

רועי יוסף
רועי יוסף

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

  • חתול 12 דצמבר 2022, 22:09

    רעיון טוב. למה להכניס svg לקוד ולא בקובץ חיצוני?

    • רועי יוסף 12 דצמבר 2022, 22:32

      איך שאני רואה את זה אני מכניס קוד לקוד.. אתה רואה יתרון בלהוסיף את זה כקובץ חיצוני?

      • חתול 12 דצמבר 2022, 22:36

        בעיני זה מעמיס על הקובץ ופוגע בקריאות שלו אבל מצאתי דיון ב stackoverflow עם צדדים לכאן ולכאן.

        • רועי יוסף 12 דצמבר 2022, 22:52

          אתה מתבלבל בין inline SVG לאופן בו אני השתמשתי (data URI). אפשר לראות כאן מתי עדיף להשתמש ב data URI, ואני חושב שאני בהחלט עונה על ״הדרישות״. שורת קוד אחת קצרה יחסית ב CSS וחסכתי גם קריאת HTTP. מה שכן, מהתגובה שלך שמתי לב שאני לא מיישם את זה בתגובות הפוסט ואולי כדאי שאעשה זאת גם כאן… 🙂

  • שלומי 23 דצמבר 2022, 13:31

    תותח כמו תמיד, אך הייתי מוסיף את זה גם בתגובות..

    • רועי יוסף 23 דצמבר 2022, 13:39

      תודה, שוקל את זה… 🙂

  • אליק זמליאנקין 18 ינואר 2023, 21:13

    הצעה נוספת לטרגט לינקים יוצאים (בהנחה שכל לינק יוצא נפתח בחלונית חדשה)

    a[target="_blank"]:after
    • רועי יוסף 18 ינואר 2023, 21:15

      אחלה, תודה על השיתוף אליק..

  • אהרן כהן 2 פברואר 2023, 16:49

    עובד מושלם תודה רבה

  • אייל 22 אוקטובר 2023, 21:55

    מגניב!

תגובה חדשה

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