Dziś przychodzę do ciebie z radosną nowiną. Otóż rozwiążę za ciebie 3 problemy, z którymi możesz spotkać się w codziennej pracy. Nie, nie zaopiekuję się twoimi dziećmi, kawy również nie zrobię, podwyżki nie załatwię. Lepiej skupmy się na tym, co umiem robić.
Problem 1: Wyłączenie automatycznego tłumaczenia strony / elementu.
Na pewno kojarzysz okienko Chrome z zapytaniem „Przetłumaczyć tę stronę?”. Klikając „Tłumacz” możemy włączyć automatyczne przetłumaczenie przeglądanej witryny. Z różnych przyczyn taka dodatkowa funkcjonalność może nie być mile widziana na twojej stronie. Jak ją zatem wyłączyć?
Z ratunkiem przychodzi atrybut translate:
<html translate="no"> Mało tego! Atrybut translate możemy również przypisać do wybranego elementu. W ten sposób wyłączymy tłumaczenie np. nazwy firmy.
<span translate="no">Apple</span>Rozumiem, że obecny brak wsparcia we Firefox może zniechęcać do użycia tego atrybutu. Jednak ma ono pełne wsparcie co najmniej Google Translate, a to już wystarczający powód, aby zapamiętać go na przyszłość.
Problem 2: Otwieranie linków w nowej zakładce.
Powszechnie wiadomo, że atrybut target="_blank" przypisany do konkretnego odnośnika otwiera go w nowej zakładce.
Co jednak zrobić w przypadku, kiedy chcemy, aby każdy link na naszej stronie otwierał się w nowej zakładce? A, nie daj Boże, mamy tych linków bardzo bardzo dużo i nie chcemy / nie możemy każdemu z nich przypisywać atrybutu target?
Z pomocą przychodzi wtedy tag base.
<head>
<base target="_blank">
...
</head> A przy okazji – krótka piłka – co innego możemy dorzucić do tagu base? Atrybut url, czyli podstawowy adres URL dla wszystkich relatywnych adresów URL na stronie.
Problem 3: Analiza ruchu na stronie.
Kolejny use case – chcemy zbadać ruch na stronie, czyli zbierać dane o różnych interakcjach użytkownika ze stroną. Albo chcemy zbierać dane o użytkownikach klikających tylko w jeden, wybrany odnośnik.
W takich przypadkach możemy skorzystać z atrybutu ping.
<a href="https://www.ach-te-internety.pl/3-rozwiazania-html"
ping="https://www.ach-te-internety.pl/tracking">Przykładowy przycisk</a>A teraz otwórz ten artykuł w Chrome, włącz narzędzia developerskie (zakładka z siecią), ustaw Preserve log i kliknij poniżej.
Śmiało, nie bój się! Raz się żyje Sprawdź dokładnie zapytanie, które się wysłało (tak, to z 404). Zwróć uwagę na payload, czyli słowo „PING”. Przyjrzyj się nagłówkom content-type oraz ping-to. Ten drugi zawiera miejsce, do którego kierował odnośnik. Dodatkowe informacje można dodawać np. do parametrów query.
Atrybut ping ma niesamowity potencjał. Jednak do pełni sukcesu brakuje mu wsparcia na… Firefox. Ok, wsparcie jest, ale dopiero po włączeniu odpowiedniej flagi w ustawieniach. Poza tym atrybut ping ma co najmniej jednego poważnego rywala – Google Analytics Tak czy siak, z pewnością istnieją specyficzne problemy, w których atrybut ping będzie najlepszym rozwiązaniem. Takie, w których bez sensu jest ciągnąć za sobą goryla i całą dżunglę chcąc jedynie banana.
Koniec na dziś. Klasycznie zapraszam do komentowania i dzielenia się swoimi doświadczeniami z opisanymi powyżej technikami
