Manchmal kann es sinnvoll sein, einen Textabschnitt nur bei einer bestimmten Bildschirmbreite oder -höhe mit einem Link zu versehen. Wenn beispielsweise in der mobilen Ansicht ein Kontaktformular erst durch Scrollen sichtbar wird, kann man in einer Textbox im oberen, sichtbaren Bereich die Wörter „Kontakt aufnehmen“ in einen Link einbetten, der zu dieser Stelle springt.
<a href="#contact">Kontakt aufnehmen</a>
In der Desktop-Ansicht befindet sich das Kontaktformular nun neben der Text-Box, so dass darin enthaltene Link keinen Sinn macht. Zur Abhilfe kann man ihn mit CSS formatieren, so dass er wie ein gewöhnlicher Textabschnitt ausschaut und der Mauscursor beim Drüberfahren sich nicht in eine Hand verwandelt. Hierzu versieht man den Link mit einer ID, z.B. skip-to-contact-form:
<a id="skip-to-contact-form" href="#contact">Kontakt aufnehmen</a>
Bei einer Mindestbreite des Viewports von 1000px kann der Link dann beispielsweise folgendermaßen wegformatiert werden:
@media screen and (min-width: 1000px) {
#skip-to-contact-form {
cursor: default;
text-decoration: none;
color: #000;
}
}
Allerdings ist er dann weiterhin klickbar. Wenn der Besucher den Textabschnitt mit der Maus markieren möchte, könnte er auf diese Weise den Sprung zum Kontaktformular auslösen, was für Irritationen sorgen könnte. Um den Link zu deaktivieren braucht es nicht zwangsläufig JavaScript, in CSS3 kann man hierzu auch die Eigenschaft pointer-events nutzen:
@media screen and (min-width: 1000px) {
#skip-to-contact-form {
pointer-events: none;
cursor: default;
text-decoration: none;
color: #000;
}
}
Abgesehen von Opera Mini, der vorwiegend bei der mobilen Ansicht zum Einsatz kommt, unterstützen alle aktuellen Browser-Versionen diese CSS-Eigenschaft (siehe caniuse).