Korzystając z tej witryny, wyrażasz zgodę na Politykę prywatności.
Akceptuję
Magazyn T3Magazyn T3Magazyn T3
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Czytasz: Okiełznać style: obsługa mediów
Podziel się
Powiadomienie Pokaż więcej
Aa
Magazyn T3Magazyn T3
Aa
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Szukaj
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Zaobserwuj
  • Advertise
© 2007-2023
Magazyn T3 > Wszystkie > Internet Maker > Okiełznać style: obsługa mediów
Internet Maker

Okiełznać style: obsługa mediów

Paweł Grzesiak
Paweł Grzesiak Opublikowany 08/05/2007
Podziel się
3 minut(y) czytania

Zdecydowana większość internautów korzysta z przeglądarek WWW. Są wśród nich tacy, którzy ulubione treści chcą wydrukować lub obejrzeć na urządzeniu przenośnym, np. nowoczesnym telefonie komórkowym. Standard CSS2 pozwala na przystosowanie strony do wymogów różnych mediów.

Postęp jaki się dokonał na rynku telekomunikacji w ostatniej dekadzie gwarantuje, że w najbliższych latach dostęp do internetu będzie możliwy w dowolnym miejscu na kuli ziemskiej. Oferta coraz nowocześniejszych telefonów komórkowych już dziś pozwala na serfowanie po sieci bez konieczności korzystania z ubogich stron WAP, które używają wciąż języka WML.

Coraz szybsze procesory w komórkach i coraz większe wyświetlacze LCD sprawiają, że znika ograniczenie technologiczne dotyczące rozdzielczości ekranu. Dlatego rolą webmastera w ciągu najbliższych lat będzie dotrzymanie tempa zmian i przystosowanie swojej witryny do takiej postaci, by możliwe było jej przeglądanie na urządzeniach przenośnych.

Problem projektowania polega jednak na tym, że każde urządzenie ma inne parametry użytkowe. Nie możemy z góry założyć minimalnej używanej rozdzielczości na 800 x 600 pikseli. Choć wydaje się to mało realne, to jednak możliwe jest stworzenie witryny, która będzie się dobrze prezentowała zarówno na monitorze komputerowym, na ekranie telefonu komórkowego, jak i na wydruku.

- Reklama -

Arkusze stylów CSS już dziś oferują funkcjonalność, która pozwala powyższą kwestię obsługi różnych mediów rozwiązać z przyzwoitym rezultatem.

Obsługa mediów

Najpopularniejszym sposobem na dołączenie arkusza stylów do dokumentu XHTML jest skorzystanie z takiego kodu:

Wiąże on jednoznacznie dokument tekstowy z jego wystrojem graficznym – domyślnym arkuszem CSS. Gdy do powyższego kodu dodamy nową właściwość o nazwie media, możemy zróżnicować domyślnie ładowane arkusze w zależności od typu urządzenia na którym wyświetlana jest strona. Dla każdego z arkuszy stylów określamy media, w których może on być wykorzystywany w taki sposób:

- Reklama -


lub w taki:



Jak łatwo zauważyć, jeden arkusz może być domyślnym stylem dla wielu urządzeń, zarówno ekranu komputera, telewizora, jak i ekranu projekcyjnego. Wykaz dostępnych rodzajów urządzeń zgromadzono w załączonej tabeli.

Zaprezentowana metoda nie jest oczywiście jedynym sposobem na dołączenie arkuszy alternatywnych. Jeżeli style rozpowszechniamy wewnątrz dokumentu XHTML, posiłkujemy się regułą @media:

Alternatywą dla reguły @media jest skorzystanie z właściwości media. To jednak wymusza każdorazowe otwieranie i zamykanie znacznika style, gdy mamy zamiar zmienić styl dla danego medium:

Zastosowanie może też znaleźć tu reguła @import. W tym przypadku korzystamy jednak z zewnętrznych arkuszy ładowanych bezpośrednio z kodu CSS:

Strona

Standard CSS pozwala definiować strony. Tworzy się je przy użyciu reguły @page, określając parametry: rozmiar, margines, przerwa, znak cięcia strony.

Przykład implementacji strony w formacie A4:

@page strona1 {
  size: 21cm 29.7cm;
  margin: 1in;
}

Strona a druk

Reguła @page i przynależące do niej właściwości umożliwiają określenie wielu dodatkowych parametrów druku. Przykładowe możliwości:

  • ustalanie marginesów drukowanych witryn WWW, na przykład tak, by nieparzyste strony miały większy lewy margines na oprawę, a parzyste – prawy,
  • możliwość ustawienia w dowolnym miejscu znaku końca strony, który wszystkie treści poniżej niego przenosi na kolejną, pustą stronę.

Takich opcji jest więcej. Lecz o ile mogą się one wydawać przydatne podczas czytania tego tekstu, to w praktyce bardzo rzadko się je stosuje. Jeżeli dostarczymy użytkownikowi arkusz, który spełni kilka podstawowych warunków (o których za chwilę), to stosowanie właściwości z serii page mija się z celem. Bardziej świadomy użytkownik, chcąc podzielić odpowiednio treść na stronie WWW, najpewniej zrobi to po swojemu, kopiując treść do ulubionego edytora tekstu i tam uzyskując pożądany efekt.

Wersja do druku

Problem wydruku witryn internetowych polega głównie na tym, że typowa strona WWW nie jest idealnie dopasowana do wymiarów kartki A4. Rozwiązaniem tego problemu jest przygotowanie specjalnej wersji strony, przeznaczonej do wydruku. Bardzo często zdarza się jednak, że choć taka wersja istnieje, to jednak w najmniejszym stopniu nie spełnia swojej funkcji.
Z czego powinna się składać dobra strona do wydruku:

1. Nagłówek

W górnej części dokumentu umieszczamy małe logo serwisu, odpowiednio duży tytuł artykułu oraz adres URL, pod którym dany artykuł można bez trudu odnaleźć.

2. Treść

Czcionka bezszeryfowa ma wiele zalet – bardzo dobrze prezentuje się na stronach WWW. Nie zmienia to jednak faktu, że treść drukowaną czyta się znacznie łatwiej, gdy zastosujemy czcionkę z szeryfami (np. popularny Times). Najlepszym dowodem na to jest prasa codzienna.

Kontrast odgrywa kluczową rolę przy czytaniu tekstu. Zastosujmy maksymalnie duży. Ponieważ medium jest tu biały arkusz papieru, tekst powinien być odpowiednio ciemny, by mógł być bez problemu przeczytany.

Rozmiar czcionki powinien być na tyle duży, by możliwe było jej odczytanie bez szkła powiększającego, a na tyle mały, by drukowany tekst nie zamienił się w grubą książkę. Najlepiej więc w granicach 10-12 pt.

Wszyscy użytkownicy drukarek stawiają na ekonomię zużycia tuszy. Jak wiadomo, najdroższe jest drukowanie w kolorze. Z tego względu warto zadbać, by tekst i wszystkie odnośniki publikować w kolorze czarnym. Warto też usunąć irytujące dodatki na stronie do druku, takie jak banery reklamowe i paski z odnośnikami. Użytkownik raczej nie zdecyduje się na ich wydruk. Każda przeglądarka umożliwia zaznaczenie tekstu do druku. Bez trudu można tym sposobem pominąć reklamę (publikowaną najczęściej w nagłówku dokumentu).

Nie eksperymentujmy z kolorem tła – powinno być białe. Przeglądarki internetowe i tak nie drukują kolorowego tła, ani żadnych zdjęć umieszczonych w tle. Jednak właśnie te elementy mogą skutecznie odstraszyć użytkowników od zamiaru drukowania, sugerując im, że na wydrukowanie strony zużyją ogromną ilość tuszu.

3. Stopka

Zawieramy w niej informację o autorze strony i prawach autorskich.

Tworzymy stronę do druku

Możemy rozróżnić dwa sposoby, które doprowadzą nas do stworzenia witryny do wydruku:

  • dla istniejącej strony WWW tworzymy alternatywny arkusz stylów, używany przez przeglądarkę podczas drukowania,
  • dla istniejącej strony WWW tworzymy dodatkowe podstrony prezentujące zubożony kod HTML i wzbogacamy je o zoptymalizowany pod kątem wydruków arkusz stylów.

Trudno jednoznacznie stwierdzić, który ze sposobów jest bardziej korzystny. Zależy to w głównej mierze od złożoności witryny. Dla programisty korzystniejszym podejściem może się okazać sposób drugi, bo choć wymaga włożenia nieco większej ilości pracy, to stwarza wyizolowaną grupę podstron serwisu zdatnych do druku. Z kolei pierwszy sposób przypadnie do gustu tym, którzy chcą operować tylko i wyłącznie na stylach CSS, bez żadnej znaczącej ingerencji w kod XHTML (najczęściej obudowany przez bardziej skomplikowane skrypty).

Bazując na przykładowej stronie WWW i korzystając z pierwszego sposobu, zabieramy się za sporządzenia dodatkowego arkusza przeznaczonego do wydruku.

Witryna bazowa

Strona, na której bazujemy w tym artykule została stworzona w oparciu o technologie XHTML i CSS. Nie korzysta z tabel. Pełny kod źródłowy udostępniamy na płycie CD dołączonej do magazynu. Tymczasem zarys źródła prezentuje się następująco:



[..]


Do standardowego arkusza stylu dołączamy dodatkowy, odznaczający się właściwością media = print, co oznacza, że zostanie zinterpretowany przez przeglądarkę przy podglądzie druku i/lub przy samym druku.


Okiełznać style: Wersja do druku

Menu

Strona główna Kontakt

Kategorie

[..]

Główna część dokumentu składa się z:

  • nagłówka ({html}

    {/html}),

  • menu (kontener div o id = menu),
  • treści (kontener div o id = main),

Co nowego?

Sed quis erat ut libero faucibus porta

In ut tellus vitae est fermentum porta.Więcej..

[..]

W kontenerze main umieszczono listę ostatnio dodanych aktualności. To nasza treść, którą użytkownik zechce wydrukować.

Arkusz stylów

Kod źródłowy XHTML jest czysty, tzn. brak tu jakichkolwiek elementów definiujących wygląd witryny. Nie umieszczono tu też żadnych tabel. To rodzaj wzorcowego kodu, który wzbogacony o arkusze stylów CSS stanowi przykład poprawnie wykonanej strony WWW. Kod CSS jest jednak zbyt rozległy, by publikować go w całości. Warto przy okazji tej strony zwrócić uwagę, jak rozwiązano jej układ. Występują tu dwa kontenery – menu oraz main. Pierwszy obejmuje zasięgiem cały pasek boczny, drugi – całą zawartość strony. Ulokowano je, stosując taki kod:

DIV#main { 
  position: absolute; 
  margin-left: 180px; 
} 
DIV#menu { 
  position: absolute; 
}

Ten sposób wymusza określenie odstępu treści od lewego brzegu ekranu. By ta metoda pozycjonowania elementów na stronie zdała egzamin, konieczne jest też określenie szerokości elementu menu.

Wracamy jednak do arkusza do druku. Kopiujemy styl style.css, nazywając jego kopię print.css. W ten sposób szybko zyskujemy szablon do nanoszenia poprawek. Warto dodać, że wersja do druku korzysta w pierwszej kolejności ze stylów zdefiniowanych w style.css, a dopiero później sięga po print.css. Dlatego nie możemy przystąpić do ustalania stylów do druku od zera. Arkusz print.css służy zatem do nadpisywania reguł zawartych w dokumencie style.css, a nie do ich definiowania na nowo.

Nasze cele:

  • usunąć tło z nagłówka, zmienić kolor czcionki,
  • usunąć niepotrzebne menu boczne,
  • zmienić kolor tła na biały,
  • zmienić czcionki na szeryfowy Times,
  • zmienić rozmiar czcionek na proporcjonalny do strony.

Kolor tła ustalamy na przezroczysty (co w efekcie da biały), definiujemy domyślną czcionkę i określamy jej rozmiar. Warto korzystać tutaj z jednostek jakimi są punkty. Zostały one stworzone na potrzeby wydruku.

BODY { 
  background-color: transparent; 
  font-family: Times, serif; font-size: 12pt; 
}

CSS pozwala na schowanie pewnych elementów strony WWW bezpośrednio z poziomu arkusza. Usuwamy więc zbędne menu, posiłkując się właściwością display:

DIV#menu { 
  display: none; 
}

Nasza treść strony miała ramkę okalającą. Nie możemy usunąć tej właściwości z kodu, bowiem zostanie wówczas przejęta definicja ramki z arkusza style.css. Dlatego określamy zerową ramkę:

DIV#main { 
  margin: 0; 
  border: none; 
  width: auto; 
}

Wszystkie nagłówki występujące w dokumencie muszą mieć kolor czarny i proporcjonalną wielkość:

H2 { 
  font-size: 22pt; 
  color: black; 
  background-color: transparent; 
}
H4 { 
  font-size: 20pt; 
  font-weight: normal; 
  color: black; 
  padding: 0; 
  margin: 0; 
  padding-bottom: 15pt; 
}

Dodatkowe parametry, takie jak odstępy, marginesy i kolory tła muszą zostać przestawione do wartości zerowych. W innym przypadku zostaną użyte wartości ze stylu style.css.

Problemem, który uwidacznia się dopiero po wydrukowaniu strony jest brak odnośników. Jeżeli internauta wydrukuje artykuł, wszystkie odnośniki ukażą mu się w postaci podkreślonego tekstu. Istnieje w CSS metoda pozwalająca na wyświetlenie obok każdego odnośnika adresu URL na który wskazuje. Dokonuje się tego przy użyciu pseudoklasy Link:After i Visited:After i właściwości content. Niestety, ta metoda nie współpracuje z przeglądarką Microsoftu:

P A:Link:After, 
P A:Visited:After { 
  content: \" (http://mojastrona.pl/\" attr(href) \") \"; 
}
P.bottom A:Link:After, 
P.bottom A:Visited:After {
  content: \" (\" attr(href) \") \"; 
}

W ten oto sposób stworzyliśmy arkusz CSS do wydruku. Wydaje się, że jest to wersja wystarczająca, nie wymagająca nanoszenia już większych poprawek. Warto dodać, że arkusz będzie poprawnie działał na całej witrynie, umożliwiając wydruk dowolnej podstrony. To dodatkowy atut za tworzeniem nowoczesnych witryn w oparciu o CSS.

Obsługa urządzeń przenośnych

Wszystkie urządzenia przenośne (ang. handheld), do których zaliczamy telefony komórkowe i palmtopy, pochodzą od różnych producentów i dysponują różnymi możliwościami technicznymi. Ich zaletą jest niewątpliwie mobilność. Wraz z wypuszczaniem na rynek kolejnych modeli aparatów rodziły się standardy WAP 1.0, a później WAP 2.0.

Choć wciąż możliwe jest korzystanie z języka WML, używanego przez długi czas do tworzenia witryn WAP, to od jakiegoś czasu obserwujemy znaczny przyrost witryn tworzonych w oparciu o XHTML i CSS. Style CSS mogą zatem odgrywać kluczową rolę przy tworzeniu witryn na potrzeby handheldów. Niestety, w większości przypadków zadanie to jest co najmniej karkołomne. Każde urządzenie ma nieco inną rozdzielczość matrycy LCD. Można przyjąć, że jest to:

  • 100-320 px szerokości w przypadku telefonów komórkowych,
  • 320-640 px szerokości dla palmtopów.

Jest kilka wskazówek odnośnie projektowania witryn dla urządzeń przenośnych. Ta najważniejsza wydaje się oczywista. Użytkownicy nie tolerują witryn, które zmuszają ich do przewijania w poziomie. Przy projektowaniu należy się ponadto wystrzegać: skomplikowanego kodu źródłowego, dzielonych/składanych grafik, ramek, wyskakujących okienek, kodu JavaScript, dynamicznych efektów.

Podobnie jak przy tworzeniu dokumentów do wydruku, istotne jest zachowanie odpowiedniego kontrastu pomiędzy tłem a tekstem. Pozwoli to zapewnić odpowiednią widoczność tekstu w przypadku używania urządzenia w niekorzystnych warunkach oświetleniowych – ostrego słońca. Nie warto używać apletów Java i Flash, nawet gdyby nie było problemów z ich odtwarzaniem. Definitywnie nie wolno tworzyć witryn tylko w oparciu o te technologie.

Cechy dobrze zaprojektowanego kodu:

  • na wystrój witryny składa się tylko jedna kolumna,
  • od został maksymalnie uproszczony, lecz jest zgodny ze standardami,
  • wszystkie grafiki zawierają opis zastępczy (ALT), który dobrze opisuje zawartość obrazu.

Jak projektować

Z uwagi na ograniczenie do jednej kolumny oraz chęć zapewnienia przejrzystości strony, witryny tworzone dla handheldów najczęściej powstają jako oddzielne projekty. Dzięki temu łatwiej zaprojektować kod CSS, a i kod XHTML ma nieporównywalnie krótszą postać. Niewątpliwie jednak tworzenie dobrych, uniwersalnych witryn jest możliwe, czego najlepszym przykładem jest strona http://widgets.opera.com, będąca częścią projektu przeglądarki Opera.

Jak działają przeglądarki?

Wraz z pojawieniem się palmtopów producenci tradycyjnych przeglądarek internetowych zabrali się za miniaturyzację swoich aplikacji na potrzeby urządzeń przenośnych.

Programy zostały zaprojektowane tak, by wyświetlać wszystkie dostępne w sieci strony WWW. To jednak rodzi wiele problemów. Z większością stron przeznaczonych do wyświetlenia na dużych ekranach radzą sobie raczej z gorszym niż z lepszym skutkiem.

Warto wiedzieć, że przeglądarki, takie jak Opera dla urządzeń przenośnych inaczej traktują takie elementy jak: układy stron, obrazy, kolory, tabele, ramki, rozmiary czcionek, formatowanie.

Witryny wyświetlane w urządzeniach przenośnych publikuje się w postaci jednokolumnowej, stąd dochodzi do pewnych kompromisów na poziomie przeglądarki (tu przykład pracy Opery):

  • jeżeli strona składa się z wielu kolumn, przeglądarka zamieni ją na jedną, zgodnie z kolejnością – pierwszy wiersz, kolejne kolumny, drugi wiersz, kolejne kolumny itd.,
  • niektóre obrazy, które są zbyt duże w stosunku do wyświetlacza, są usuwane przez przeglądarkę, a pozostałe podlegają procesowi skalowania,
  • jeżeli obraz został podzielony na fragmenty i złożony przy użyciu kodu strony, nie zostanie wyświetlony poprawnie – w jednym momencie dopuszczalne jest wyświetlenie tylko jednego obrazu,
  • obrazki w tle nie są wyświetlane, a w ich miejsce wstawia się jasnoszare tło,
  • kolor tekstu zamieniany jest na czarny,
  • nie wszystkie wielkości czcionki będą wyświetlone – przeglądarka może je ograniczyć do kilku,
  • strony w ramkach mogą zostać wyświetlone poprawnie jako lista poszczególnych okien lub całkowicie bez ramek (zostanie aktywowana sekcja {html}{/html}). </li> </ul> <h3>Jedna kolumna</h3> <p>Istnieje szybki sposób na&nbsp;przekonanie się jak witryna będzie wyglądała w&nbsp;wystroju jednokolumnowym. Zamieniając wszystkie elementy tabel na&nbsp;postać bloku &#8211; jeden znacznik danego typu może w&nbsp;jednej linii wystąpić tylko&nbsp;raz, ekspresowo uzyskujemy pożądany efekt: </p></p> <pre lang="css" line="1" >table, tr, td, th { display: block; }</pre> <h3>Jak testować</h3> <p>Urządzenia przenośne są&nbsp;niestety na&nbsp;tyle drogie, że&nbsp;zakup kilku różnych egzemplarzy wiązałby się z&nbsp;dużymi kosztami. Dlatego w&nbsp;sieci można znaleźć wiele rozwiązań, które starają się naśladować możliwości urządzeń przenośnych. </p></p> <p>Najciekawszą propozycję oferuje przeglądarka Opera. Najnowsze jej wersje mają opcję Mały Ekran. Po&nbsp;jej wywołaniu przeglądarka przechodzi w&nbsp;emulację trybu handheld. Ładuje styl odpowiedzialny za&nbsp;wyświetlanie przenośnej wersji strony (a&nbsp;jeśli ten nie&nbsp;istnieje, ładuje standardowy) i&nbsp;ogranicza szerokość ekranu. </p></p> <p>Uruchomienie tego trybu jest banalnie proste. Wystarczy wybrać z&nbsp;menu <i>Widok | Mały Ekran</i> lub skorzystać ze&nbsp;skrótu klawiszowego Shift + F11.</p></p> <link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet"> <style type="text/css"> .wp-review-10394.review-wrapper { font-family: 'Nunito', sans-serif; } </style> <div id="review" class="review-wrapper wp-review-10394 wp-review-circle-type wp-review-xiaomi-template delay-animation"> </div> <style type="text/css"> .wp-review-10394.review-wrapper { width: 100%; float: center; padding: 10px; } .wp-review-10394.review-wrapper .review-desc { padding: 0 15px; margin-top: -5px; } .wp-review-10394.review-wrapper, .wp-review-10394 .review-title, .wp-review-10394 .review-desc p, .wp-review-10394 .reviewed-item p { color: #474747; } .wp-review-10394 .review-links a { background: #ff3f3f; color: #fff; padding: 10px 20px; border-radius: 34px; font-size: 17px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); border: none; letter-spacing: 1px; } .wp-review-10394 .review-links a:hover { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.4); border: none; } .wp-review-10394 .review-list li, .wp-review-10394.review-wrapper { background: #efebe9; border-radius: 10px; } .wp-review-10394 .review-list li { border-radius: 0; } .wp-review-10394.review-wrapper .review-total-wrapper .review-result { color: #fff !important; } .wp-review-10394.review-wrapper .wp-review-rating-input.review-star .review-result-wrapper .review-result { letter-spacing: -2.13px; } .wp-review-10394.review-wrapper .review-pros-cons { clear: both; padding: 25px 15px; } .wp-review-10394.review-wrapper .mb-5 { text-transform: uppercase; font-weight: bold; } .wp-review-10394 .user-review-area { padding: 10px 15px; } .wp-review-10394 .user-review-area .review-star { line-height: 28px; } .wp-review-10394.review-wrapper .review-title { font-weight: 700; background: transparent; margin-bottom: 15px; } .wp-review-10394.review-wrapper .review-total-wrapper { width: 150px; float: left; margin: 0 20px 15px 15px; text-align: center; background: #ff3f3f; color: #fff; } .wp-review-10394.review-wrapper.wp-review-point-type .review-total-wrapper, .wp-review-10394.review-wrapper.wp-review-percentage-type .review-total-wrapper { width: 175px; } .wp-review-10394.review-wrapper.wp-review-point-type .review-total-wrapper .review-result, .wp-review-10394.review-wrapper.wp-review-percentage-type .review-total-wrapper .review-result { background: #fff!important; } .wp-review-10394.review-wrapper.wp-review-circle-type .review-total-wrapper { width: 102px; background: transparent; padding: 0; margin: 0 30px 15px 15px; } .wp-review-10394.review-wrapper .review-percentage .review-result-wrapper, .wp-review-10394.review-wrapper .review-percentage .review-result, .wp-review-10394.review-wrapper .review-point .review-result-wrapper, .wp-review-10394.review-wrapper .review-point .review-result { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); height: 28px; margin-bottom: 0; background: #ffd6d6; } .wp-review-10394.review-wrapper .review-total-wrapper .review-total-box { text-align: center; padding: 0; background: rgba(0, 0, 0, 0.1); line-height: 1.5; } .wp-review-10394.review-wrapper.wp-review-point-type .review-total-wrapper .review-total-box, .wp-review-10394.review-wrapper.wp-review-percentage-type .review-total-wrapper .review-total-box, .wp-review-10394.review-wrapper.wp-review-thumbs-type .review-total-wrapper .review-total-box { padding: 30px 0; font-size: 30px; } .wp-review-10394.review-wrapper .review-star.review-total { color: #fff; margin-top: 15px; } .wp-review-10394.review-wrapper .user-total-wrapper .user-review-title { display: inline-block; margin-top: 0; } .wp-review-10394.review-wrapper .user-review-title { color: inherit; } .wp-review-10394.review-wrapper .review-result-wrapper i { font-size: 19px; } .wp-review-10394.review-wrapper, .wp-review-10394 .review-title, .wp-review-10394 .review-list li, .wp-review-10394 .review-list li:last-child, .wp-review-10394 .user-review-area, .wp-review-10394 .reviewed-item, .wp-review-10394 .review-links, .wp-review-10394 .wpr-user-features-rating { border-color: #efebe9; } .wp-review-10394 .wpr-rating-accept-btn { background: #ff3f3f; margin: 10px 15px; width: -moz-calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -o-calc(100% - 30px); width: calc(100% - 30px); border-radius: 4px; } @media screen and (max-width:480px) { .wp-review-10394.review-wrapper { padding: 0; } } </style> </p></p></div> <div class="entry-bottom"> <div id="text-3" class="widget entry-widget clearfix widget_text"> <div class="textwidget"> <div class="related-sec related-5"> <div class="inner"> <div class="block-h heading-layout-1"><div class="heading-inner"><h3 class="heading-title none-toc"><span>Może cię także zainteresować</span></h3></div></div> <div class="block-inner"> <div class="p-wrap p-list-inline" data-pid="1000043841"> <h4 class="entry-title none-toc"><i class="rbi rbi-plus"></i> <a class="p-url" href="https://magazynt3.pl/pozycjonowanie-strony-internetowej-a-reklamy-internecie-czym-sie-roznia/" rel="bookmark">Pozycjonowanie strony internetowej a&nbsp;reklamy w&nbsp;Internecie &#8211; czym się różnią?</a></h4> </div> <div class="p-wrap p-list-inline" data-pid="1000034154"> <h4 class="entry-title none-toc"><i class="rbi rbi-plus"></i> <a class="p-url" href="https://magazynt3.pl/jak-szybko-i-latwo-stworzyc-strone-mobilna/" rel="bookmark">Jak szybko i&nbsp;łatwo stworzyć stronę mobilną</a></h4> </div> <div class="p-wrap p-list-inline" data-pid="1000034147"> <h4 class="entry-title none-toc"><i class="rbi rbi-plus"></i> <a class="p-url" href="https://magazynt3.pl/strona-na-wordpressie-grunt-to-dobry-hosting/" rel="bookmark">Strona na&nbsp;WordPressie? Grunt to&nbsp;dobry hosting</a></h4> </div> <div class="p-wrap p-list-inline" data-pid="1000032980"> <h4 class="entry-title none-toc"><i class="rbi rbi-plus"></i> <a class="p-url" href="https://magazynt3.pl/jak-zabezpieczyc-swoje-zdjecia-w-chmurze/" rel="bookmark">Jak zabezpieczyć swoje zdjęcia w&nbsp;chmurze</a></h4> </div> <div class="p-wrap p-list-inline" data-pid="1000028030"> <h4 class="entry-title none-toc"><i class="rbi rbi-plus"></i> <a class="p-url" href="https://magazynt3.pl/jak-usunac-historie-swojej-aktywnosci-z-facebooka/" rel="bookmark">Jak usunąć historię swojej aktywności z&nbsp;Facebooka?</a></h4> </div> </div> </div> </div> </div> </div> </div> <div class="efoot"> <div class="efoot-bar tag-bar"> <span class="blabel is-meta"><i class="rbi rbi-tag" aria-hidden="true"></i>TAGI:</span> <span class="tags-list h5"><a href="https://magazynt3.pl/tag/css/" rel="tag">CSS</a>, <a href="https://magazynt3.pl/tag/przegladarki-internetowe/" rel="tag">Przeglądarki internetowe</a></span> </div> </div> <div class="article-meta is-hidden"> <meta itemprop="mainEntityOfPage" content="https://magazynt3.pl/okielznac-style-obsluga-mediow/"> <span class="vcard author"> <span class="fn" itemprop="author" itemscope content="Paweł Grzesiak" itemtype="https://schema.org/Person"> <meta itemprop="url" content="https://magazynt3.pl/author/grzesiak/"> <span itemprop="name">Paweł Grzesiak</span> </span> </span> <time class="updated" datetime="2011-09-19T10:39:34+02:00" content="2011-09-19T10:39:34+02:00" itemprop="dateModified">19/09/2011</time> <time class="published" datetime="2007-05-08T13:30:02+02:00" content="2007-05-08T13:30:02+02:00" itemprop="datePublished">08/05/2007</time> <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <meta itemprop="name" content="Magazyn T3"> <meta itemprop="url" content="https://magazynt3.pl/"> <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <meta itemprop="url" content="https://magazynt3.pl/wp-content/uploads/2023/09/logo@2x-w.png"> </span> </span> </div> </div> </div> <div class="e-shared-sec entry-sec"> <div class="e-shared-header h4"> <i class="rbi rbi-share" aria-hidden="true"></i><span>Podziel się tym artykułem</span> </div> <div class="rbbsl tooltips-n effect-fadeout is-bg"> <a class="share-action share-trigger icon-facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F" data-title="Facebook" rel="nofollow"><i class="rbi rbi-facebook" aria-hidden="true"></i><span>Facebook</span></a> <a class="share-action share-trigger icon-twitter" href="https://twitter.com/intent/tweet?text=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w&amp;url=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F&amp;via=Magazyn+T3" data-title="Twitter" rel="nofollow"> <i class="rbi rbi-twitter" aria-hidden="true"></i><span>Twitter</span></a> <a class="share-action icon-whatsapp is-web" href="https://web.whatsapp.com/send?text=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w &#9758; https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F" target="_blank" data-title="WhatsApp" rel="nofollow"><i class="rbi rbi-whatsapp" aria-hidden="true"></i><span>Whatsapp</span></a> <a class="share-action icon-whatsapp is-mobile" href="whatsapp://send?text=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w &#9758; https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F" target="_blank" data-title="WhatsApp" rel="nofollow"><i class="rbi rbi-whatsapp" aria-hidden="true"></i><span>Whatsapp</span></a> <a class="share-action share-trigger icon-linkedin" href="https://linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F&amp;title=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w" data-title="linkedIn" rel="nofollow"><i class="rbi rbi-linkedin" aria-hidden="true"></i><span>LinkedIn</span></a> <a class="share-action share-trigger icon-reddit" href="https://www.reddit.com/submit?url=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F&amp;title=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w" data-title="Reddit" rel="nofollow"><i class="rbi rbi-reddit" aria-hidden="true"></i><span>Reddit</span></a> <a class="share-action share-trigger icon-telegram" href="https://t.me/share/?url=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F&amp;text=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w" data-title="Telegram" rel="nofollow"><i class="rbi rbi-telegram" aria-hidden="true"></i><span>Telegram</span></a> <a class="share-action icon-email" href="mailto:?subject=Okiełznać%20style:%20obsługa%20mediów%20BODY=Ciekawy%20artykuł.%20Zerknij:%20https://magazynt3.pl/okielznac-style-obsluga-mediow/" data-title="Email" rel="nofollow"> <i class="rbi rbi-email" aria-hidden="true"></i><span>Email</span></a> <a class="share-action icon-copy copy-trigger" href="#" data-copied="Skopiowany" data-link="https://magazynt3.pl/okielznac-style-obsluga-mediow/" rel="nofollow" data-copy="Skopiuj link"><i class="rbi rbi-link-o" aria-hidden="true"></i><span>Skopiuj link</span></a> <a class="share-action icon-print" rel="nofollow" href="javascript:if(window.print)window.print()" data-title="Drukuj"><i class="rbi rbi-print" aria-hidden="true"></i><span>Drukuj</span></a> <a class="share-action native-share-trigger more-icon" href="#" data-link="https://magazynt3.pl/okielznac-style-obsluga-mediow/" data-ptitle="Okiełznać style: obsługa mediów" data-title="Więcej" rel="nofollow"><i class="rbi rbi-more" aria-hidden="true"></i></a> </div> </div> <div class="sticky-share-list-buffer"> <div class="sticky-share-list"> <div class="t-shared-header meta-text"> <i class="rbi rbi-share" aria-hidden="true"></i> <span class="share-label">Podziel się</span> </div> <div class="sticky-share-list-items effect-fadeout is-color"> <a class="share-action share-trigger icon-facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F" data-title="Facebook" data-gravity=n rel="nofollow"><i class="rbi rbi-facebook" aria-hidden="true"></i></a> <a class="share-action share-trigger icon-twitter" href="https://twitter.com/intent/tweet?text=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w&amp;url=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F&amp;via=Magazyn+T3" data-title="Twitter" data-gravity=n rel="nofollow"> <i class="rbi rbi-twitter" aria-hidden="true"></i></a> <a class="share-action icon-whatsapp is-web" href="https://web.whatsapp.com/send?text=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w &#9758; https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F" target="_blank" data-title="WhatsApp" data-gravity=n rel="nofollow"><i class="rbi rbi-whatsapp" aria-hidden="true"></i></a> <a class="share-action icon-whatsapp is-mobile" href="whatsapp://send?text=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w &#9758; https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F" target="_blank" data-title="WhatsApp" data-gravity=n rel="nofollow"><i class="rbi rbi-whatsapp" aria-hidden="true"></i></a> <a class="share-action share-trigger icon-linkedin" href="https://linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F&amp;title=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w" data-title="linkedIn" data-gravity=n rel="nofollow"><i class="rbi rbi-linkedin" aria-hidden="true"></i></a> <a class="share-action share-trigger icon-reddit" href="https://www.reddit.com/submit?url=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F&amp;title=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w" data-title="Reddit" data-gravity=n rel="nofollow"><i class="rbi rbi-reddit" aria-hidden="true"></i></a> <a class="share-action share-trigger icon-telegram" href="https://t.me/share/?url=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow%2F&amp;text=Okie%C5%82zna%C4%87+style%3A+obs%C5%82uga+medi%C3%B3w" data-title="Telegram" data-gravity=n rel="nofollow"><i class="rbi rbi-telegram" aria-hidden="true"></i></a> <a class="share-action icon-email" href="mailto:?subject=Okiełznać%20style:%20obsługa%20mediów%20BODY=Ciekawy%20artykuł.%20Zerknij:%20https://magazynt3.pl/okielznac-style-obsluga-mediow/" data-title="Email" data-gravity=n rel="nofollow"> <i class="rbi rbi-email" aria-hidden="true"></i></a> <a class="share-action icon-copy copy-trigger" href="#" data-copied="Skopiowany" data-link="https://magazynt3.pl/okielznac-style-obsluga-mediow/" rel="nofollow" data-copy="Skopiuj link" data-gravity=n><i class="rbi rbi-link-o" aria-hidden="true"></i></a> <a class="share-action icon-print" rel="nofollow" href="javascript:if(window.print)window.print()" data-title="Drukuj" data-gravity=n><i class="rbi rbi-print" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="entry-pagination e-pagi entry-sec mobile-hide"> <div class="inner"> <div class="nav-el nav-left"> <a href="https://magazynt3.pl/W-poszukiwaniu-bledow/"> <span class="nav-label is-meta"> <i class="rbi rbi-angle-left" aria-hidden="true"></i><span>Poprzedni artykuł</span> </span> <span class="nav-inner"> <span class="h4"><span class="p-url">W&nbsp;poszukiwaniu błędów</span></span> </span> </a> </div> <div class="nav-el nav-right"> <a href="https://magazynt3.pl/Beniamin-kontrola-polaczen-internetowych/"> <span class="nav-label is-meta"> <span>Następny artykuł</span><i class="rbi rbi-angle-right" aria-hidden="true"></i> </span> <span class="nav-inner"> <span class="h4"><span class="p-url">Beniamin &#8211; kontrola połaczeń internetowych</span></span> </span> </a> </div> </div> </div> </div> <div class="sidebar-wrap single-sidebar"> <div class="sidebar-inner clearfix"> <div id="widget-post-1" class="widget rb-section w-sidebar clearfix widget-post"><div class="block-h widget-heading heading-layout-1"><div class="heading-inner"><h4 class="heading-title"><span>Ostatnie newsy</span></h4></div></div><div class="widget-p-listing"> <div class="p-wrap p-small p-list-small-2" data-pid="1000080931"> <div class="feat-holder"> <div class="p-featured ratio-v1"> <a class="p-flink" href="https://magazynt3.pl/sluchawki-bowers-wilkins-px8-w-nowym-burgundowym-wykonczeniu/" title="Słuchawki Bowers &amp; Wilkins Px8 w&nbsp;nowym, burgundowym wykończeniu"> <img width="150" height="150" src="https://magazynt3.pl/wp-content/uploads/2023/09/High-BW-Px8-Royal-Burgundy-Campaign-4-150x150.jpg" class="featured-img wp-post-image" alt="" decoding="async" loading="lazy" /> </a> </div> </div> <div class="p-content"> <h5 class="entry-title"> <a class="p-url" href="https://magazynt3.pl/sluchawki-bowers-wilkins-px8-w-nowym-burgundowym-wykonczeniu/" rel="bookmark">Słuchawki Bowers &amp; Wilkins Px8 w&nbsp;nowym, burgundowym wykończeniu</a></h5> <div class="p-meta"> <div class="meta-inner is-meta"> <span class="meta-el meta-category meta-bold"> <a class="category-1" href="https://magazynt3.pl/newsy/">Newsy</a> </span> <span class="meta-el meta-date"> <time class="date published" datetime="2023-09-28T11:56:55+02:00">28/09/2023</time> </span> </div> </div> </div> </div> <div class="p-wrap p-small p-list-small-2" data-pid="1000080925"> <div class="feat-holder"> <div class="p-featured ratio-v1"> <a class="p-flink" href="https://magazynt3.pl/rivacase-va1075-va1080-mobilne-zasilanie-dla-laptopow/" title="RIVACASE VA1075/VA1080 – mobilne zasilanie dla laptopów"> <img width="150" height="150" src="https://magazynt3.pl/wp-content/uploads/2023/09/1-19-150x150.jpg" class="featured-img wp-post-image" alt="" decoding="async" loading="lazy" /> </a> </div> </div> <div class="p-content"> <h5 class="entry-title"> <a class="p-url" href="https://magazynt3.pl/rivacase-va1075-va1080-mobilne-zasilanie-dla-laptopow/" rel="bookmark">RIVACASE VA1075/VA1080 – mobilne zasilanie dla laptopów</a></h5> <div class="p-meta"> <div class="meta-inner is-meta"> <span class="meta-el meta-category meta-bold"> <a class="category-1" href="https://magazynt3.pl/newsy/">Newsy</a> </span> <span class="meta-el meta-date"> <time class="date published" datetime="2023-09-28T11:49:28+02:00">28/09/2023</time> </span> </div> </div> </div> </div> <div class="p-wrap p-small p-list-small-2" data-pid="1000080919"> <div class="feat-holder"> <div class="p-featured ratio-v1"> <a class="p-flink" href="https://magazynt3.pl/creative-stage-se-mini-soundbar-z-bluetooth-i-usb/" title="Creative Stage SE&nbsp;mini – soundbar z&nbsp;Bluetooth i&nbsp;USB"> <img width="150" height="150" src="https://magazynt3.pl/wp-content/uploads/2023/09/main-3-150x150.jpg" class="featured-img wp-post-image" alt="" decoding="async" loading="lazy" /> </a> </div> </div> <div class="p-content"> <h5 class="entry-title"> <a class="p-url" href="https://magazynt3.pl/creative-stage-se-mini-soundbar-z-bluetooth-i-usb/" rel="bookmark">Creative Stage SE&nbsp;mini – soundbar z&nbsp;Bluetooth i&nbsp;USB</a></h5> <div class="p-meta"> <div class="meta-inner is-meta"> <span class="meta-el meta-category meta-bold"> <a class="category-1" href="https://magazynt3.pl/newsy/">Newsy</a> </span> <span class="meta-el meta-date"> <time class="date published" datetime="2023-09-28T11:23:33+02:00">28/09/2023</time> </span> </div> </div> </div> </div> <div class="p-wrap p-small p-list-small-2" data-pid="1000080913"> <div class="feat-holder"> <div class="p-featured ratio-v1"> <a class="p-flink" href="https://magazynt3.pl/system-macos-sonoma-dostepny/" title="System macOS Sonoma dostępny"> <img width="150" height="150" src="https://magazynt3.pl/wp-content/uploads/2023/09/Apple-macOS-Sonoma-3up-150x150.jpg" class="featured-img wp-post-image" alt="" decoding="async" loading="lazy" /> </a> </div> </div> <div class="p-content"> <h5 class="entry-title"> <a class="p-url" href="https://magazynt3.pl/system-macos-sonoma-dostepny/" rel="bookmark">System macOS Sonoma dostępny</a></h5> <div class="p-meta"> <div class="meta-inner is-meta"> <span class="meta-el meta-category meta-bold"> <a class="category-1" href="https://magazynt3.pl/newsy/">Newsy</a> </span> <span class="meta-el meta-date"> <time class="date published" datetime="2023-09-27T23:02:57+02:00">27/09/2023</time> </span> </div> </div> </div> </div> </div></div><div id="custom_html-5" class="widget_text widget rb-section w-sidebar clearfix widget_custom_html"><div class="block-h widget-heading heading-layout-1"><div class="heading-inner"><h4 class="heading-title"><span>Reklama</span></h4></div></div><div class="textwidget custom-html-widget"><!-- Magazyn T3 300x250 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-8584451387662554" data-ad-slot="1415924507"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></div> </div> </div> </div> </article> </div> </div> </div> </div> <div id="single-infinite-point" class="single-infinite-point pagination-wrap"> <i class="rb-loader" aria-hidden="true"></i> </div> </div> <footer class="footer-wrap rb-section left-dot"> <div class="footer-inner footer-has-bg"> <div class="footer-columns rb-columns is-gap-25 rb-container edge-padding footer-4c"> <div class="block-inner"> <div class="footer-col"><div id="text-1" class="widget w-sidebar rb-section clearfix widget_text"> <div class="textwidget"><div class="h1" style="color: var(--global-color); margin-bottom: 10px;">//</div> <h4 class="footer-quote">Stylowy, rzetelny, inteligentny &#8211; Magazyn T3. Jesteśmy wiodącym magazynem lifestyle’owym, dostępnym co&nbsp;miesiąc w&nbsp;druku i&nbsp;cały czas dla Was online, skupionym na&nbsp;nowych technologiach.</h4> </div> </div></div><div class="footer-col"><div id="custom_html-2" class="widget_text widget w-sidebar rb-section clearfix widget_custom_html"><div class="block-h widget-heading heading-layout-10"><div class="heading-inner"><h4 class="heading-title"><span>NASZE SERWISY</span></h4></div></div><div class="textwidget custom-html-widget"><b>DOM, OGRÓD I&nbsp;WNĘTRZA</b> <a href="https://budujemydom.pl" target="_blank" rel="noopener">BudujemyDom.pl</a> | <a href="http://www.wybieramydom.pl" target="_blank" rel="noopener">WybieramyDom.pl</a> | <a href="https://budujemydom.pl/cozaile" target="_blank" rel="noopener">CoZaIle.pl</a> | <a href="https://budujemydom.pl/irbj" target="_blank" rel="noopener">Informator Budownictwa</a> | <a href="https://zielonyogrodek.pl" target="_blank" rel="noopener">ZielonyOgródek.pl</a> | <a href="https://czasnawnetrze.pl" target="_blank" rel="noopener">CzasNaWnetrze.pl</a> | <a href="https://ekobudowanie.pl" target="_blank" rel="noopener">Ekobudowanie.pl</a></div></div></div><div class="footer-col"><div id="custom_html-3" class="widget_text widget w-sidebar rb-section clearfix widget_custom_html"><div class="block-h widget-heading heading-layout-10"><div class="heading-inner"><h4 class="heading-title"><span>&nbsp;</span></h4></div></div><div class="textwidget custom-html-widget"><b>MUZYKA I&nbsp;DŹWIĘK</b> <a href="https://audio.com.pl" target="_blank" rel="noopener">Audio.com.pl</a> | <a href="https://magazyngitarzysta.pl" target="_blank" rel="noopener">MagazynGitarzysta.pl</a> | <a href="https://magazynperkusista.pl" target="_blank" rel="noopener">MagazynPerkusista.pl</a> | <a href="https://estradaistudio.pl" target="_blank" rel="noopener">EstradaiStudio.pl</a> | <a href="https://livesound.pl" target="_blank" rel="noopener">LiveSound.pl</a></div></div></div><div class="footer-col"><div id="custom_html-4" class="widget_text widget w-sidebar rb-section clearfix widget_custom_html"><div class="block-h widget-heading heading-layout-10"><div class="heading-inner"><h4 class="heading-title"><span>&nbsp;</span></h4></div></div><div class="textwidget custom-html-widget"><b>ELEKTRONIKA I&nbsp;AUTOMATYKA</b> <a href="https://elektronikab2b.pl" target="_blank" rel="noopener">ElektronikaB2B.pl</a> | <a href="https://automatykab2b.pl" target="_blank" rel="noopener">AutomatykaB2B.pl</a> | <a href="https://ep.com.pl" target="_blank" rel="noopener">Elektronika Praktyczna</a> | <a href="https://elportal.pl" target="_blank" rel="noopener">Elportal.pl</a> | <a href="http://www.swiatradio.com.pl/virtual/" target="_blank" rel="noopener">Świat Radio</a> <br /><b>FOTOGRAFIA, EDUKACJA I&nbsp;HI-TECH</b> <a href="https://digitalcamerapolska.pl" target="_blank" rel="noopener">DigitalCameraPolska.pl</a> | <a href="https://www.fotopolis.pl" target="_blank" rel="noopener">Fotopolis.pl</a> | <a href="https://magazynt3.pl" target="_blank" rel="noopener">MagazynT3.pl</a> | <a href="https://mlodytechnik.pl" target="_blank" rel="noopener">MlodyTechnik.pl</a> <br /> <b>ZDROWIE I&nbsp;RODZINA</b> <a href="https://ktociewyleczy.pl" target="_blank" rel="noopener">KtoCieWyleczy.pl</a><br /><br /></div></div></div> </div> </div> <div class="footer-copyright"> <div class="rb-container edge-padding"> <div class="bottom-footer-section"> <a class="footer-logo" href="https://magazynt3.pl/" title="Magazyn T3"> <img class="logo-default" data-mode="default" height="512" width="512" src="https://magazynt3.pl/wp-content/uploads/2023/09/logo@2x.png" alt="Magazyn T3" decoding="async" loading="lazy"><img class="logo-dark" data-mode="dark" height="512" width="512" src="https://magazynt3.pl/wp-content/uploads/2023/09/logo@2x.png" alt="Magazyn T3" decoding="async" loading="lazy"> </a> <div class="footer-social-list"> <span class="footer-social-list-title h6">Zaobserwuj</span> <a class="social-link-instagram" aria-label="Instagram" data-title="Instagram" href="https://www.instagram.com/kubicki.w.odbiciu/" target="_blank" rel="noopener nofollow"><i class="rbi rbi-instagram" aria-hidden="true"></i></a> </div> </div> <div class="copyright-inner"> <div class="copyright">© 2007-2023 </div> </div> </div> </div> </div></footer> <!-- (C)2000-2013 Gemius SA - gemiusAudience / pp.magazynt3.pl / podstrony --> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var pp_gemius_identifier = '0mtAVKNI66t_TiJKcTt1ysSrrodKkhtGIZs743Lbh2H..7'; // lines below shouldn't be edited function gemius_pending(i) { window[i] = window[i] || function() {var x = window[i+'_pdata'] = window[i+'_pdata'] || []; x[x.length]=arguments;};}; gemius_pending('gemius_hit'); gemius_pending('gemius_event'); gemius_pending('pp_gemius_hit'); gemius_pending('pp_gemius_event'); (function(d,t) {try {var gt=d.createElement(t),s=d.getElementsByTagName(t)[0],l='http'+((location.protocol=='https:')?'s':''); gt.setAttribute('async','async'); gt.setAttribute('defer','defer'); gt.src=l+'://corm.hit.gemius.pl/xgemius.js'; s.parentNode.insertBefore(gt,s);} catch (e) {}})(document,'script'); //--><!]]> </script> </div> <script> (function () { const darkModeID = 'RubyDarkMode'; let currentMode = null; if (navigator.cookieEnabled) { currentMode = localStorage.getItem(darkModeID); } if ('dark' === currentMode) { document.body.setAttribute('data-theme', 'dark'); let darkIcons = document.querySelectorAll('.mode-icon-dark'); if (darkIcons.length) { for (let i = 0; i < darkIcons.length; i++) { darkIcons[i].classList.add('activated'); } } } else { document.body.setAttribute('data-theme', 'default'); let defaultIcons = document.querySelectorAll('.mode-icon-default'); if (defaultIcons.length) { for (let i = 0; i < defaultIcons.length; i++) { defaultIcons[i].classList.add('activated'); } } } })(); </script> <script> (function () { if (navigator.cookieEnabled) { const privacyBox = document.getElementById('rb-privacy'); const currentPrivacy = localStorage.getItem('RubyPrivacyAllowed'); if (!currentPrivacy && privacyBox?.classList) { privacyBox.classList.add('activated'); } const readingSize = sessionStorage.getItem('rubyResizerStep'); if (readingSize) { const body = document.querySelector('body'); if (readingSize === '2') { body.classList.add('medium-entry-size'); } else if (readingSize === '3') { body.classList.add('big-entry-size'); } } } })(); </script> <script type="text/template" id="bookmark-toggle-template"> <i class="rbi rbi-bookmark" aria-hidden="true" data-title="Zapisz"></i> <i class="bookmarked-icon rbi rbi-bookmark-fill" aria-hidden="true" data-title="Cofnij zapisanie"></i> </script> <script type="text/template" id="bookmark-ask-login-template"> <a class="login-toggle" data-title="Sign In to Save" href="https://magazynt3.pl/wp-login.php?redirect_to=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow"><i class="rbi rbi-bookmark" aria-hidden="true"></i></a> </script> <script type="text/template" id="follow-ask-login-template"> <a class="login-toggle" data-title="Sign In to Follow" href="https://magazynt3.pl/wp-login.php?redirect_to=https%3A%2F%2Fmagazynt3.pl%2Fokielznac-style-obsluga-mediow"><i class="follow-icon rbi rbi-plus" aria-hidden="true"></i></a> </script> <script type="text/template" id="follow-toggle-template"> <i class="follow-icon rbi rbi-plus" data-title="Zaobserwuj"></i> <i class="followed-icon rbi rbi-bookmark-fill" data-title="Unfollow"></i> </script> <aside id="bookmark-notification" class="bookmark-notification"></aside> <script type="text/template" id="bookmark-notification-template"> <div class="bookmark-notification-inner {{classes}}"> <div class="bookmark-featured">{{image}}</div> <div class="bookmark-inner"> <span class="bookmark-title h5">{{title}}</span><span class="bookmark-desc">{{description}}</span> </div> </div> </script> <script type="text/template" id="follow-notification-template"> <div class="follow-info bookmark-notification-inner {{classes}}"> <span class="follow-desc"><span>{{description}}</span><strong>{{name}}</strong></span> </div> </script> <div id="rb-user-popup-form" class="rb-user-popup-form mfp-animation mfp-hide"> <div class="logo-popup-outer"> <div class="logo-popup"> <div class="login-popup-header"> <span class="logo-popup-heading h3">Witaj z powrotem!</span> <p class="logo-popup-description is-meta">Zaloguj się</p> </div> <div class="user-form"><form name="popup-form" id="popup-form" action="https://magazynt3.pl/wp-login.php" method="post"><p class="login-username"> <label for="user_login">Nazwa użytkownika lub adres e-mail</label> <input type="text" name="log" id="user_login" autocomplete="username" class="input" value="" size="20" /> </p><p class="login-password"> <label for="user_pass">Hasło</label> <input type="password" name="pwd" id="user_pass" autocomplete="current-password" spellcheck="false" class="input" value="" size="20" /> </p><p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Zapamiętaj mnie</label></p><p class="login-submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Zaloguj się" /> <input type="hidden" name="redirect_to" value="https://magazynt3.pl/okielznac-style-obsluga-mediow" /> </p></form></div> <div class="user-form-footer is-meta"> <a href="https://magazynt3.pl/wp-login.php?action=lostpassword">Zapomniałeś hasła?</a> </div> </div> </div> </div> <script id='foxiz-core-js-extra'> var foxizCoreParams = {"ajaxurl":"https:\/\/magazynt3.pl\/wp-admin\/admin-ajax.php","darkModeID":"RubyDarkMode","cookieDomain":"","cookiePath":"\/"}; </script> <script src='https://magazynt3.pl/wp-content/plugins/foxiz-core/assets/core.js?ver=2.0.1' id='foxiz-core-js'></script> <script id='leadin-script-loader-js-js-extra'> var leadin_wordpress = {"userRole":"visitor","pageType":"post","leadinPluginVersion":"10.2.5"}; </script> <script src='https://js-eu1.hs-scripts.com/143284697.js?integration=WordPress&#038;ver=10.2.5' async defer id='hs-script-loader'></script> <script src='https://magazynt3.pl/wp-content/plugins/wp-review-pro/public/js/js.cookie.min.js?ver=2.1.4' id='js-cookie-js'></script> <script src='https://magazynt3.pl/wp-content/plugins/wp-review-pro/public/js/jquery.appear.js?ver=1.1' id='wp_review-jquery-appear-js'></script> <script src='https://magazynt3.pl/wp-includes/js/underscore.min.js?ver=1.13.4' id='underscore-js'></script> <script id='wp-util-js-extra'> var _wpUtilSettings = {"ajax":{"url":"\/wp-admin\/admin-ajax.php"}}; </script> <script src='https://magazynt3.pl/wp-includes/js/wp-util.min.js?ver=6.3.1' id='wp-util-js'></script> <script id='wp_review-js-js-extra'> var wpreview = {"ajaxurl":"https:\/\/magazynt3.pl\/wp-admin\/admin-ajax.php","popup":{"enable":"0","width":"800px","animation_in":"bounceIn","animation_out":"bounceOut","overlay_color":"#0b0b0b","overlay_opacity":"0.8","post_type":"post","queryby":"category","orderby":"random","category":"0","tag":"0","review_type":"star","limit":"6","expiration":"30","cookie_name":"wpr-popup-1609926753424","delay":"0","show_on_load":false,"show_on_reach_bottom":false,"exit_intent":false,"screen_size_check":false,"screen_width":"0","embed_show_title":"","embed_show_thumbnail":"","embed_show_excerpt":"","embed_show_rating_box":"","embed_show_credit":""},"rateAllFeatures":"Please rate all features","verifiedPurchase":"(Verified purchase)","commentImageUploadNonce":"6c534da7c2"}; </script> <script src='https://magazynt3.pl/wp-content/plugins/wp-review-pro/public/js/main.js?ver=3.4.11' id='wp_review-js-js'></script> <script src='https://magazynt3.pl/wp-content/plugins/wp-review-pro/public/js/jquery.knob.min.js?ver=1.1' id='jquery-knob-js'></script> <script src='https://magazynt3.pl/wp-content/themes/t3-2023/assets/js/jquery.waypoints.min.js?ver=3.1.1' id='jquery-waypoints-js'></script> <script src='https://magazynt3.pl/wp-content/themes/t3-2023/assets/js/rbswiper.min.js?ver=6.5.8' id='rbswiper-js'></script> <script src='https://magazynt3.pl/wp-content/themes/t3-2023/assets/js/jquery.mp.min.js?ver=1.1.0' id='jquery-magnific-popup-js'></script> <script src='https://magazynt3.pl/wp-content/themes/t3-2023/assets/js/jquery.tipsy.min.js?ver=1.0' id='rb-tipsy-js'></script> <script src='https://magazynt3.pl/wp-content/themes/t3-2023/assets/js/jquery.ui.totop.min.js?ver=v1.2' id='jquery-uitotop-js'></script> <script src='https://magazynt3.pl/wp-content/themes/t3-2023/assets/js/personalized.js?ver=2.0.1' id='foxiz-personalize-js'></script> <script id='foxiz-global-js-extra'> var foxizParams = {"twitterName":"Magazyn T3","highlightShares":"1","highlightShareFacebook":"1","highlightShareTwitter":"1","highlightShareReddit":"1","sliderSpeed":"5000","sliderEffect":"slide","sliderFMode":"1"}; </script> <script src='https://magazynt3.pl/wp-content/themes/t3-2023/assets/js/global.js?ver=2.0.1' id='foxiz-global-js'></script> </body> </html>