מהם HTML5 Placeholder קישורים עבור?
idUp עד HTML5, התגית דורשת מאפיין אחד: href. אבל HTML5 עושה אפילו תכונה זו אופציונלית. כאשר אתה כותב את התג ללא תכונות כלשהן הוא נקרא קישור מציין מיקום.
קישור מציין מיקום נראה כך:
הקודםבאמצעות קישורים Placeholder במהלך הפיתוח
כמעט כל מעצב אינטרנט יצר קישורים מיקום מיקום בזמן זה או אחר בעת עיצוב ובניית אתר אינטרנט. לפני HTML5, היינו כותבים:
קישור טקסטכמציין המיקום. ושלחתי אתרים mockup ללקוחות עם אותם placeholders רק כדי לקבל את הלקוח לשאול אותי "למה את הקישורים של טקסט לעבוד?"
הבעיה בשימוש ב- hashtag (#) כקישור מציין מיקום היא שהקישור ניתן ללחיצה, והדבר עלול לגרום לבלבול עבור הלקוחות שלך. ואם מישהו שוכח לעדכן אותם בכתובות האתרים הנכונות, קישורים אלה יכולים להופיע באתר החי משום שהם אינם מקשרים לשום דבר.
במקום זאת, עליך להתחיל להשתמש בתגים ללא תכונות כלשהן. אתה יכול לסמן את אלה כדי להיראות כמו כל קישור אחר בדף שלך, אבל הם לא יהיו ללחיצה כי הם רק מצייני מיקום.
באמצעות קישורים Placeholder באתרים חיים
אבל קישורים מיקום יש מקום בעיצוב אתרים עבור יותר מאשר רק פיתוח. מקום אחד שקישור מציין מיקום יכול להאיר נמצא בניווט. במקרים רבים, לרשימות הניווט באתר יש דרך להצביע על הדף שבו אתה נמצא. אלה נקראים לעתים קרובות "אתה כאן" אינדיקטורים.
רוב האתרים מסתמכים על תכונות id על האלמנט שזקוק לסמן "אתה נמצא כאן", אך חלק מהם משתמשים גם בתכונה class. עם זאת, כל תכונה אתה משתמש, אתה צריך לעשות חבורה של עבודה לכל דף שיש לו את הניווט על זה, הוספת והסרה של התכונה מן האלמנטים הנכונים.
עם קישור מציין מיקום, תוכל לכתוב את הניווט שלך כרצונך ולאחר מכן פשוט להסיר את התכונה href מהקישור המתאים בעת הוספת הניווט לדף. אני מאחסן את רשימת הניווט כולה כקטע בעורך שלי, אז זה רק עותק מהיר להעתיק ולאחר מכן למחוק את href. אתה יכול גם לקבל CMS שלך לעשות את אותו הדבר.
וחוץ מזה הוספת סגנון מיוחד (אני אראה לך איך בהמשך) לקובץ מציין מיקום, הקישור אינו ניתן ללחיצה. אז הלקוחות לא מקבלים מבולבל לחשוב שהם עשויים לקבל משהו אחר אם הם לוחצים על הקישור ניווט שבו הם נמצאים כרגע.
עיצוב קישורים
קישורים Placeholder הם בסגנון קל בסגנון שונה מהקישורים האחרים בדף האינטרנט שלך. פשוט הקפד לסגנון הן את התג והן את התג: link. לדוגמה:
א {צבע: אדום; מודגש; text-decoration: none; } a: link {color: blue; משקל גופני: רגיל; טקסט-קישוט: קו תחתון; }CSS זה יהפוך קישורים למיקום מיקום מודגש ואדום, ללא קו תחתון. בעוד הקישורים הרגילים יהיו בעלי משקל תקין, כחול וקו תחתון.
זכור לאפס כל סגנונות שאינך רוצה שיישארו מהתג. לדוגמה, אני מגדיר את משקל הגופן כדי להדגיש את הקישורים של מציין המיקום, ולכן הייתי צריך להגדיר אותו:
משקל גופני: רגיל;עבור הקישורים הרגילים. אותו הדבר נכון עם קישוט טקסט, על ידי הסרת אותו עם בורר, זה היה הוסר עבור: בורר הקישור אם לא הייתי שם אותו בחזרה.