Как правильно использовать псевдокласс «placeholder shown» для улучшения пользовательского опыта веб-страницы

Псевдоклассы в CSS позволяют применять стили к элементам в зависимости от их состояния, таким как наведение или фокус. Однако, что делать, если вы хотите стилизовать текстовое поле, когда в нем есть плейсхолдер, но неактивно и не выделено? В этом случае на помощь приходит псевдокласс :placeholder-shown, который позволяет применять стили именно к плейсхолдеру.

Плейсхолдер — это текстовая подсказка, которая отображается в текстовом поле до того момента, как пользователь введет свои данные. Этот текст обычно выглядит светлее, чем введенный пользователем текст, и часто предлагает указания или примеры того, что ожидается от пользователя.

Используя псевдокласс :placeholder-shown, вы можете применять стили к плейсхолдеру, изменяя его цвет, фон, шрифт и другие свойства. Это отличный способ улучшить внешний вид формы и сделать ее более современной и привлекательной для пользователей.

Зачем нужен псевдокласс плейсхолдера

Одним из преимуществ использования псевдокласса плейсхолдера является возможность улучшить читаемость текста, изменяя его цвет, размер шрифта или даже добавляя эффект заливки. Это позволяет выделить поле ввода и сделать его более привлекательным для взгляда пользователя.

Кроме того, псевдокласс плейсхолдера можно использовать для добавления дополнительной информации или подсказок, которые помогут пользователям заполнить форму правильно. Например, вы можете отобразить примеры правильного формата ввода или описать необходимые требования для заполнения поля.

Еще одним полезным применением псевдокласса плейсхолдера является возможность стилизовать поля ввода, которые содержат ошибки. Вы можете изменить цвет или добавить рамку к полю ввода, чтобы обратить внимание пользователя на ошибочно заполненные поля.

В целом, псевдокласс плейсхолдера предоставляет разработчикам больше возможностей для продвижения и улучшения пользовательского опыта. Он позволяет улучшить читаемость, добавить подсказки и подсветить ошибочно заполненные поля, делая формы более интуитивно понятными и легкими в использовании.

Описание и назначение

Основное назначение псевдокласса плейсхолдера — это улучшение пользовательского опыта и обеспечение четкой обратной связи с пользователями при заполнении форм. Он позволяет подсказать пользователю, какие данные ожидаются в поле, а также улучшить визуальное представление элемента формы.

С помощью псевдокласса плейсхолдера можно задавать стили для текста, такие как цвет, размер шрифта, стиль и т. д. Это позволяет создавать более привлекательные и интуитивно понятные формы для пользователей.

Псевдокласс плейсхолдера применяется к элементам ввода формы (, ) с использованием селектора :placeholder, за которым следует стиль, который будет применяться к плейсхолдеру.</p><h2 id="kak-ispolzovat-psevdoklass-pleysholdera">Как использовать псевдокласс плейсхолдера</h2><p>Для использования псевдокласса плейсхолдера нужно указать его в селекторе и задать нужные стили:</p><ul><li><code>::placeholder</code> — общий стиль для всех плейсхолдеров;</li><li><code>::-webkit-input-placeholder</code> — стиль для плейсхолдера в браузерах, основанных на WebKit (например, Chrome и Safari);</li><li><code>::-moz-placeholder</code> — стиль для плейсхолдера в браузере Mozilla Firefox;</li><li><code>::-ms-input-placeholder</code> — стиль для плейсхолдера в браузере Microsoft Edge;</li><li><code>::-webkit-input-placeholder</code> — стиль для плейсхолдера в браузере Opera.</li></ul><p>Пример использования псевдокласса плейсхолдера:</p><pre> <code> input::placeholder { color: gray; font-style: italic; } </code> </pre><p>В данном примере плейсхолдер для всех полей ввода будет отображаться серым цветом и курсивом.</p><p>Помимо изменения стиля плейсхолдера, псевдокласс позволяет также добавлять эффекты анимации, менять фоновую картинку и многое другое. С помощью псевдокласса плейсхолдера можно создать интересные и красивые визуальные эффекты и улучшить пользовательский опыт.</p><h2 id="primery-ispolzovaniya">Примеры использования</h2><p>Псевдокласс плейсхолдера может быть использован для добавления стилизации и поведения к текстовым полям формы в HTML. Ниже приведены несколько примеров использования.</p><p><strong>Пример 1:</strong></p><p>Добавление цвета текста и фона к плейсхолдеру:</p><p><em></p><p>«`css</p><p>input::placeholder {</p><p>color: blue;</p><p>background-color: lightgrey;</p><p>}</p><p></em></p><p>В этом примере цвет текста плейсхолдера устанавливается на синий, а фоновый цвет — на светло-серый.</p><p><strong>Пример 2:</strong></p><p>Установка шрифта и размера текста для плейсхолдера:</p><p><em></p><p>«`css</p><p>input::placeholder {</p><p>font-family: Arial, sans-serif;</p><p>font-size: 14px;</p><p>}</p><p></em></p><p>В этом примере шрифт плейсхолдера устанавливается на Arial и размер текста — на 14 пикселей.</p><p><strong>Пример 3:</strong></p><p>Применение анимации к плейсхолдеру:</p><p><em></p><p>«`css</p><p>input::placeholder {</p><p>animation: placeholder-animation 2s infinite;</p><p>}</p><p>@keyframes placeholder-animation {</p><p>0% {</p><p>opacity: 1;</p><p>}</p><p>50% {</p><p>opacity: 0.5;</p><p>}</p><p>100% {</p><p>opacity: 1;</p><p>}</p><p>}</p><p></em></p><p>В этом примере анимация применяется к плейсхолдеру, делая его поочередно непрозрачным и полупрозрачным каждые 2 секунды.</p><p>Это только несколько примеров использования псевдокласса плейсхолдера в CSS. С помощью плейсхолдеров можно создавать более интерактивные и привлекательные формы на веб-страницах.</p><h2 id="osobennosti-i-vozmozhnosti-psevdoklassa-pleysholdera">Особенности и возможности псевдокласса плейсхолдера</h2><p>В отличие от других псевдоэлементов, псевдокласс плейсхолдера применяется непосредственно к пользовательскому вводу, а не к самому элементу формы.</p><p>Особенностью псевдокласса плейсхолдера является возможность изменять стиль лишь того текста, который является плейсхолдером. Это позволяет создавать интересные и креативные эффекты, привлекая внимание пользователей.</p><p>К основным возможностям псевдокласса плейсхолдера относятся:</p><p>1. Менять цвет текста плейсхолдера — с помощью свойства <code>color</code> можно задать цвет плейсхолдера, чтобы он отличался от обычного текста.</p><p>2. Изменять стиль шрифта — свойствами <code>font-family</code>, <code>font-size</code>, <code>font-weight</code> можно создавать разные варианты шрифта для плейсхолдера.</p><p>3. Добавлять эффекты анимации — с помощью свойств <code>transition</code> и <code>animation</code> можно применить различные анимационные эффекты к плейсхолдеру, например, плавное появление или изменение цвета.</p><p>4. Менять стиль фона — используя свойства <code>background-color</code> и <code>background-image</code>, можно задать фоновый цвет или изображение для плейсхолдера.</p><p>5. Изменять положение и выравнивание — свойствами <code>text-align</code>, <code>padding</code>, <code>margin</code> можно задавать положение и отступы для плейсхолдера.</p><p>Используя псевдокласс плейсхолдера, можно предоставить пользователям удобный и стильный интерфейс для ввода данных в формы, что способствует улучшению пользовательского опыта и визуальной привлекательности веб-сайта.</p><h2 id="podderzhka-brauzerami">Поддержка браузерами</h2><p>Псевдокласс плейсхолдера легко поддерживается практически всеми современными браузерами, включая:</p><ul><li>Google Chrome</li><li>Mozilla Firefox</li><li>Microsoft Edge</li><li>Safari</li><li>Opera</li></ul><p>Помимо этого, псевдокласс плейсхолдера также поддерживается в большинстве мобильных браузеров на iOS и Android.</p><p>Это означает, что вы можете использовать псевдокласс плейсхолдера без ограничений и быть уверенными в том, что он будет корректно отображаться для пользователей в различных браузерах и на разных устройствах.</p><p>Однако, при разработке веб-страницы, всегда рекомендуется проводить тестирование на различных браузерах и устройствах, чтобы убедиться, что псевдокласс плейсхолдера работает и выглядит правильно в каждом случае.</p><h2 id="tipichnye-oshibki-pri-ispolzovanii-psevdoklassa">Типичные ошибки при использовании псевдокласса плейсхолдера</h2><p><strong>1. Применение некорректных стилей</strong></p><p>Одной из распространенных ошибок является неправильный выбор стилей для плейсхолдера. Например, использование слишком маленького или нечитаемого шрифта может сделать плейсхолдер непонятным для пользователей.</p><p><strong>2. Неправильное позиционирование текста</strong></p><p>Еще одной ошибкой является неправильное позиционирование текста плейсхолдера. Если текст находится слишком близко к краю поля ввода или слишком далеко, это может затруднить или запутать пользователей.</p><p><strong>3. Избыточное использование стилей</strong></p><p>Иногда разработчики могут усложнять стили плейсхолдера, добавляя слишком много декоративных элементов. Это может привести к перегруженности дизайна и затруднить восприятие информации.</p><p><strong>4. Неправильный цвет или фон плейсхолдера</strong></p><p>Выбор цвета и фона для плейсхолдера также является важным аспектом. Ошибкой будет использование нечитаемых композиций, при которых плейсхолдер сливается с фоном или имеет неподходящий контрастный цвет.</p><p><strong>5. Неправильная маркировка псевдокласса</strong></p><p>Необходимо убедиться, что псевдокласс плейсхолдера правильно применяется к необходимому полю ввода или текстовой области. Например, если применить стили плейсхолдера ко всем полям, то это может привести к путанице и запутанности пользователей.</p><p>Важно учитывать эти ошибки и проектировать стили плейсхолдера с учетом лучших практик, чтобы облегчить взаимодействие пользователей с формами на сайте.</p><div class="fpm_end"></div></div></article><div class="rating-box"><div class="rating-box__header">Оцените статью</div><div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="3275" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div></div><div class="entry-social"><div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image=""></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span><span class="social-button social-button--pinterest" data-social="pinterest" data-url="https://domajisto.ru/inf/kak-pravilno-ispolzovat-psevdoklass-placeholder-shown-dlya-ulucseniya-polzovatelskogo-opyta-veb-stranicy/" data-title="Как правильно использовать псевдокласс «placeholder shown» для улучшения пользовательского опыта веб-страницы" data-description="Псевдоклассы в CSS позволяют применять стили к элементам в зависимости от их состояния, таким как наведение или фокус. Однако, что делать, если вы хотите стилизовать текстовое поле, когда в нем есть плейсхолдер, но неактивно и не выделено? В этом случае на помощь приходит псевдокласс :placeholder-shown, который позволяет применять стили именно к плейсхолдеру. Плейсхолдер — это […]" data-image=""></span></div></div><meta itemprop="author" content="admin"><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://domajisto.ru/inf/kak-pravilno-ispolzovat-psevdoklass-placeholder-shown-dlya-ulucseniya-polzovatelskogo-opyta-veb-stranicy/" content="Как правильно использовать псевдокласс «placeholder shown» для улучшения пользовательского опыта веб-страницы"><div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="domajisto.ru"><meta itemprop="telephone" content="domajisto.ru"><meta itemprop="address" content="https://domajisto.ru/inf"></div></main></div><aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"><div class="sticky-sidebar js-sticky-sidebar"><div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div id="Q_sidebar"></div></div></div></div></aside><div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://domajisto.ru/inf/lucsie-mesta-dlya-prozivaniya-russkim-v-finlyandii/">Лучшие места для проживания русским в Финляндии</a></div><div class="post-card__description">Финляндия считается одной из самых привлекательных</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://domajisto.ru/inf/idealnye-mesta-dlya-komfortnoi-zizni-s-zabolevaniyami-legkix-poisk-sredy-blagopriyatnoi-dlya-zdorovya/">Идеальные места для комфортной жизни с заболеваниями легких — поиск среды, благоприятной для здоровья</a></div><div class="post-card__description">Заболевания легких становятся все более распространенными</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://domajisto.ru/inf/otpusk-na-prirode-putevoditel-po-lucsim-zagorodnym-kurortam-i-dacnym-kompleksam-moskvy/">Отпуск на природе — путеводитель по лучшим загородным курортам и дачным комплексам Москвы</a></div><div class="post-card__description">Москва, несмотря на свою огромность и насыщенность</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://domajisto.ru/inf/lucsie-mesta-dlya-zizni-na-pensii-v-rossii-vybiraite-s-umom/">Лучшие места для жизни на пенсии в России — выбирайте с умом!</a></div><div class="post-card__description">На пенсии – это идеальный период для наслаждения жизнью</div></div></div></div></div></div><div class="site-footer-container "><footer id="colophon" class="site-footer site-footer--style-gray full"><div class="site-footer-inner fixed"><div class="footer-widgets footer-widgets-3"><div class="footer-widget"><div id="nav_menu-3" class="widget widget_nav_menu"><div class="widget-header">Про сайт</div><div class="menu-about_menu-container"><ul id="menu-about_menu" class="menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="https://domajisto.ru/inf/kontakty/">Контакты</a></li><li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a href="/sitemap_index.xml">Карта сайта</a></li></ul></div></div></div><div class="footer-widget"><div id="wpshop_widget_articles-2" class="widget widget_wpshop_widget_articles"><div class="widget-header">Популярные записи</div><div class="widget-articles"><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://domajisto.ru/inf/kak-podklyucit-fm-tyuner-podrobnaya-instrukciya-dlya-novickov/">Как подключить FM-тюнер — подробная инструкция для новичков</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://domajisto.ru/inf/kak-samostoyatelno-proverit-opticeskii-kabel-v-domasnix-usloviyax-podrobnaya-instrukciya-s-posagovymi-deistviyami/">Как самостоятельно проверить оптический кабель в домашних условиях — подробная инструкция с пошаговыми действиями</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://domajisto.ru/inf/kak-oformit-prodazu-samozanyatomu-v-moi-nalog-podrobnoe-rukovodstvo/">Как оформить продажу самозанятому в мой налог — подробное руководство</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://domajisto.ru/inf/lucsie-materialy-dlya-otdelki-sten-i-potolka-v-vannoi-komnate-sovety-i-rekomendacii/">Лучшие материалы для отделки стен и потолка в ванной комнате — советы и рекомендации</a></div></div></article></div></div></div><div class="footer-widget"><div id="nav_menu-4" class="widget widget_nav_menu"><div class="widget-header">Cookie</div><div class="menu-cookie_menu-container"><ul id="menu-cookie_menu" class="menu"><li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-66"><a rel="privacy-policy" href="https://domajisto.ru/inf/privacy-policy/">Политика конфиденциальности</a></li><li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="https://domajisto.ru/inf/soglashenie/">Соглашение (пользовательское)</a></li></ul></div></div></div></div><div class="footer-bottom"><div class="footer-info"> © 2025 domajisto.ru</div></div></div></footer></div></div> <script>document.addEventListener("copy", (event) => {var pagelink = "\nИсточник: https://domajisto.ru/inf/kak-pravilno-ispolzovat-psevdoklass-placeholder-shown-dlya-ulucseniya-polzovatelskogo-opyta-veb-stranicy";event.clipboardData.setData("text", document.getSelection() + pagelink);event.preventDefault();});</script><script type="text/javascript" id="reboot-scripts-js-extra">var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"}; var wps_ajax = {"url":"https:\/\/domajisto.ru\/inf\/wp-admin\/admin-ajax.php","nonce":"b2fc41a289"};</script> <script>window.lazyLoadOptions = { elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]", data_src: "lazy-src", data_srcset: "lazy-srcset", data_sizes: "lazy-sizes", class_loading: "lazyloading", class_loaded: "lazyloaded", threshold: 300, callback_loaded: function(element) { if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) { if (element.classList.contains("lazyloaded") ) { if (typeof window.jQuery != "undefined") { if (jQuery.fn.fitVids) { jQuery(element).parent().fitVids(); } } } } }}; window.addEventListener('LazyLoad::Initialized', function (e) { var lazyLoadInstance = e.detail.instance; if (window.MutationObserver) { var observer = new MutationObserver(function(mutations) { var image_count = 0; var iframe_count = 0; var rocketlazy_count = 0; mutations.forEach(function(mutation) { for (i = 0; i < mutation.addedNodes.length; i++) { if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') { return; } if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') { return; } images = mutation.addedNodes[i].getElementsByTagName('img'); is_image = mutation.addedNodes[i].tagName == "IMG"; iframes = mutation.addedNodes[i].getElementsByTagName('iframe'); is_iframe = mutation.addedNodes[i].tagName == "IFRAME"; rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload'); image_count += images.length; iframe_count += iframes.length; rocketlazy_count += rocket_lazy.length; if(is_image){ image_count += 1; } if(is_iframe){ iframe_count += 1; } } } ); if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){ lazyLoadInstance.update(); } } ); var b = document.getElementsByTagName("body")[0]; var config = { childList: true, subtree: true }; observer.observe(b, config); } }, false);</script><script data-no-minify="1" async src="https://domajisto.ru/inf/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> <script defer src="https://domajisto.ru/inf/wp-content/cache/autoptimize/js/autoptimize_8719a8fcc817f74da642350c845eb2cd.js"></script></body></html>