Footer/ + tab
<Footer>. Возможно, этот конфиг решает вопрос и для HTML.// element-util.js
export function createElement(options) {
// код функции
}
export function showElement(options) {
// код функции
}
export function hideElement(options) {
// код функции
}import {createElement} from "./element-util.js";
function Component() {
const heading = createElement({
id: "heading",
content: "Hello World",
});
const message = createElement({
id: "message",
content: "New Article",
});
return {heading, message};
}
aria-label приоритетнее чем title.title наименее приоритетный, насколько я помню. Его перебьёт всё что угодно, и если совсем ничего нет, даже content, только тогда на него обратят внимание.title - нет на мобильных девайсах. По крайней мере визуально (voiceover`ом не проверял)
aria-labelledby и aria-label не заданы, а content приоритетнее чем атрибут title.aria-label, то, на вскидку, должен зачитать: "изображение" + значение атрибута alt + "ссылка", так как контент есть.aria-label и title равны. Но только при условии что скринридер вообще считает title за семантический атрибут. 
.block {
$this: &;
&--small {
#{$this}__elem {
height: 100px;
}
}
&__elem {
width: 200px;
height: 200px;
background: red;
}
}
.block {
&--small {
....???
}
&--small &__elem { // Это ок!
height: 100px;
}
&__elem {
width: 200px;
height: 200px;
background: red;
}
}snippets.json (можно любое другое название).File => Preferences => Settings и в строке поиска вбиваем Emmet: Extensions PathAdd Item и прописать путь к папке в которой лежат (или лежит если файл один) файлы со снипеттами. Обязательно в конце должно быть название папки, без названия самого файла!{
"html": {
"snippets": {
"img:l": "img[width height loading='lazy']"
}
}
}
<div class="table-wrapper">
<div class="table">
<div class="col indigo">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<!-- your code table --->
</div>
</div>/**
** your code css
**/
.col:first-child {
position: sticky;
z-index: 5;
left: 0;
}
.table-wrapper {
max-width: 100%;
overflow-y: hidden;
overflow-x: auto;
}
у меня уже есть решение от ответа который удалили почему то, оно работает, но я хочу понять именно алгоритм
Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?
<div class='swiper' id='my-slider'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>Slide 1</div>
<div class='swiper-slide' id='youtube-slide'>
<div id='player'></div>
</div>
<div class='swiper-slide'>Slide 3</div>
<div class='swiper-slide'>Slide 4</div>
</div>
</div>
<style>
#player {
pointer-events: none;
}
</style>const youtubeScriptTag = document.createElement('script');
youtubeScriptTag.src = 'https://www.youtube.com/iframe_api';
document.body.appendChild(youtubeScriptTag);
window.onYouTubeIframeAPIReady = () => {
const player = new YT.Player('player', {
videoId: 'orbr-C3gYKk',
playerVars: {
controls: 0
},
events: {
onReady: (event) => {
const youtubeSlide = document.getElementById('youtube-slide');
let isVideoPlaying = false;
youtubeSlide.addEventListener('click', () => {
if (isVideoPlaying) {
event.target.stopVideo();
} else {
event.target.playVideo();
}
isVideoPlaying = !isVideoPlaying;
});
}
}
});
}
const swiper = new Swiper('#my-slider', {});
document.querySelectorAll('.container').forEach(n => {
const slider = new Swiper(n.querySelector('.product-slider'), {
navigation: {
nextEl: n.querySelector('.swiper-button-next'),
prevEl: n.querySelector('.swiper-button-prev'),
},
spaceBetween: 10,
});
const thumbs = new Swiper(n.querySelector('.product-thumbs'), {
spaceBetween: 5,
centeredSlides: true,
slidesPerView: 4,
touchRatio: 0.2,
slideToClickedSlide: true,
direction: 'vertical',
});
slider.controller.control = thumbs;
thumbs.controller.control = slider;
});