Установка курсора в стиле pointer для <a> без href в HTML

Быстрый ответ

Для стилизации курсора в виде указателя для ссылок без атрибута href, примените следующий CSS-код:

a:not([href]) {
    cursor: pointer; // Вот так ссылки без href становятся визуально кликабельными!
}

Этот код стилизует элементы <a>, у которых отсутствует атрибут href, подчеркивая их интерактивность.

Практические шаги: применение CSS и JavaScript

Фокус на пользовательском опыте

• Динамический JavaScript: Используйте JavaScript для дискретного применения стилей, обеспечивающих наилучший пользовательский опыт.
• Поддержка кода: Вместо инлайновых стилей используйте отдельные CSS-классы для упрощения последующих изменений и повышения читаемости кода.
• Индикаторы интерактивности: Создавайте интерактивные элементы, предоставляя визуальную обратную связь, например, изменяя состояние :hover и курсор.

Подробнее об этом расскажет наш спикер на видео

Семантика и доступность

• Семантическая четкость: Обеспечивайте семантику и доступность вашего HTML-кода, гарантируя корректное восприятие содержимого.
• Разделение поведения: Ясно разделяйте структурные (HTML), визуальные (CSS) и поведенческие (JavaScript) аспекты в коде.
• Целевое воздействие: Применяйте JavaScript для точечного применения стилей и воздействий на элементы по их классу или идентификатору, чтобы избежать побочных эффектов.

Полезные альтернативы и советы

• Замена Href: В случае отсутствия href применяйте href="#" с обработчиком события onclick и return false; для SEO-оптимизации и предотвращения стандартного поведения ссылки.
• CSS-классы: Создавайте универсальный класс .pointer для унификации и упрощения стилизации элементов.
• Избегание #: Избегайте использования href="#" для предотвращения нежелательного перемещения к верху страницы.

Визуализация

🛶🚤🛳️ Это ссылки, ваши корабли в океане интернета.
🚤🚫🔗 Это гоночный катер без якоря, так как у него нет href!

Чтобы поддерживать направленность и передавать сигналы интерактивности используйте:

a:not([href]) {
   cursor: pointer; // Добавляем стиль курсора для восстановления ощущения взаимодействия.
}

До: 🚤✋ (Мы на месте. Нет взаимодействия.)
После: 🚤🖐️ (Мы в движении! Возникло взаимодействие.)

Улучшение интерактивности и визуальной привлекательности

• Эффект наведения: Используйте псевдокласс :hover для повышения визуальной отзывчивости элементов, не ограничиваясь только стилем курсора.
• Селекторы атрибутов: Для стилизации элементов с обработчиками JavaScript выберите теги <a> с атрибутом [onclick].
• Специфичность CSS: Следите за специфичностью CSS-стилей, чтобы избежать конфликтов и обеспечить приоритетность ваших правил.

Избегание недоразумений

• CSS или JS: Для стилизации предпочтительнее использовать CSS, так как это повышает производительность и четкость кода.
• Переиспользование классов: Повторно используйте CSS-классы для сокращения избыточности и упрощения поддержки кода.
• Доступность в web: Обеспечьте доступность ссылок без href для чтения и навигации, особенно для пользователей с ограниченными возможностями.

Глубокое погружение

• Обучение: Расширяйте свои знания, изучая материалы о разделении аспектов веб-разработки.
• Советы коллег: Обдумывайте другие подходы и решения для полного понимания данной проблемы.
• Непрерывное обучение: Интернет быстро меняется, поэтому постоянно осваивайте новые методики и подходы для улучшения пользовательского опыта.

Полезные материалы

1. ::before / ::after | CSS-Tricks – Введение в использование ::before и ::after в CSS.
2. pointer-events – CSS: Каскадные таблицы стилей | MDN – Руководство по pointer-events для начинающих от MDN.
3. Свойство CSS cursor – Обширное руководство по изменению стиля курсора с помощью CSS от W3Schools.
4. Изменение курсора с помощью CSS для улучшения пользовательского опыта (или ради удовольствия) | CSS-Tricks – Все о стилизации курсоров в CSS на CSS-Tricks.
5. cursor | Codrops – Исчерпывающее руководство по всем аспектам курсоров от Codrops.
6. ::before – CSS: Каскадные таблицы стилей | MDN – Как применять псевдо-элемент ::before с собственными стилями.
7. Can I use... Support tables for HTML5, CSS3, etc – Проверка поддержки различных стилей курсоров в браузерах.