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.
![](https://ach-te-internety.pl/wp-content/uploads/2021/05/Zrzut-ekranu-2021-05-18-o-21.55.22-1024x853.png)
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