CSS-vinkki
Olen luomassa toista sivustoa, mistä kerron myöhemmin lisää, mutta tässä yhteydessä sain idean, jonka halusin toteuttaa.
Miten näyttää käyttäjälle yhtä, mutta antaa hänen kopioida toista?
Tarkemmin sanoen kyse on siitä, että haluan näyttää käyttäjälle sananrajan yhdyssanoissa, esim. ”yhdys//sana”. Toisaalta hänen pitäisi pystyä halutessaan kopioimaan sana ilman sananrajaa esim. hakukenttään. Keksimäni ratkaisu perustuu kahden CSS-tyylimäärittelyn ovelaan yhdistämiseen.
Content-ominaisuus lienee useimmille webbisivuja kehittäville tuttu. Sillä saa tuupattua näkyviin CSS:n kautta jotain sisältöä, joka ei yleensä ole selaimilla edes valittavissa, koska se ei ole html-sisältöä vaan vain tyyliä. User-select -ominaisuus on vähemmän tunnettu. Sen avulla määritellään, miten valinta toimii. Yhdistämällä nämä kaksi saadaan aikaan efekti, jonka halusin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-demo</title>
<style>
.all-copy
{
/* Chrome all / Safari all */
-webkit-user-select: all;
/* Firefox all */
-moz-user-select: all;
/* IE 10+ */
-ms-user-select: all;
/* Likely future */
user-select: all;
}
.word-break::before
{
content: '\002F\002F';
}
</style>
</head>
<body>
<span class="all-copy">yhdys<span class="word-break"></span>sana</span>
</body>
</html>
CSS-määrittely word-break tuottaa kaksi kenoviivaa CSS-tyyliin, ei sisältöön, jolloin kenoviivat eivät yleensä selaimissa ole valittavissa. Määrittely all-copy puolestaa määrittää, että käyttäjän klikatessa jotain elementin osaa – tässä tapauksessa ”yhdys” tai ”sana” – koko elementti tulee valituksi eli koko sana ”yhdyssana”. Tämän käyttäjä voi kopioida laitettavaksi hakukenttään tai mihin ikinä haluaakin.
Ks. CSS-tricks.com
Es ist in Wirklichkeit eine nette und nützliche Information. Ich bin zufrieden, dass Sie uns diese nützlichen Informationen gerade mitgeteilt haben. Bitte halten Sie uns so auf dem Laufenden. Danke für das Teilen. Jayne Lazaro Walrath