Как вы относитесь к полному переходу на гриды?как вы относитесь к тому, чтобы перестать есть суп вилкой и перейти на ложки?
или вы до сих пор комбинируете флексы+гридысказали так, как-будто это что-то плохое. общее правило примерно такое: гриды для расположения элементов в двумерном пространстве, флексы - в одномерном
Можно сделать легче чем в флексахеще раз, гриды не замена флексам. каждый из них покрывает свои компетенции в создании лэйаута и вместе образуют цельный и удобный инструмент.
1. Здесь (на тостере) прочитал, что задать фон (background) grid-ячейке (или набору ячеек) нельзя.зачем вы задаете этот вопрос, когда можно открыть браузер и самому проверить?
Задать фон нельзя элементу у которого указан display: grid; или дочерним элементам по отношению к элементу у которого указан display: grid;? Или в обоих случаях нельзя? И почему?
Правильно ли так делать?правильно
И есть ли другие способы?есть костыль с display:contents.
<span>Testimonials</span>span {
background-image: linear-gradient(to right, red, red), linear-gradient(to left, red, red);
background-size: 0 2px;
background-position: bottom left, bottom right;
background-repeat: no-repeat;
transition: background-size .2s ease-in-out;
}
span:hover {
background-size: calc(50% - 2px) 2px;
}.dropdown {
transition: all .3s ease;
}dropdown два состояния:.dropdown {
opacity: 0;
visibility: hidden;
transform: translateY(30px);
}dropdown видим: opacity: 1;
visibility: visible;
transform: translateY(0px);mouseover, на него вешается класс focus, который инициирует переход А --> Б:menuitem.mouseover(function(){
this.addClass('focus');
});.menuitem.focus > .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}mouseout, этот класс удаляется, причем не сразу, а с задержкой в 300мс, после чего инициируется переход Б --> А:menuitem.mouseout(function(){
id = setTimeout(function(){
this.removeClass(focus);
}, 300);
});dropdown предыдущего пункта еще не спрятался (т.к. еще не истекла задеркжка в 300мс), происходит форсированное убирание класса focus с предыдущего пункта меню, в этом случае п. 3 можно переписать следующим образом:function forceRemoveClass() {
window.clearInterval(id);
prevMenuitem.removeClass('focus');
}
...
menuitem.mouseover(function(){
forceRemoveClass();
this.addClass('focus');
});.getElementsByClassName() возвращает коллекцию, а getElementByID непосредственно сам элемент.document.getElementsByClassName("menu_1")[0].addEventListener("click", openMenu);<tr id="anchor">...</tr><nav>
...
<a href="#el_721">el_721</a>
<a href="#el_722">el_722</a>
<a href="#el_723">el_723</a>
...
</nav>
<table>
<tbody>
...
<tr id="el_721">
<td>el_721</td>
<td>el_721</td>
</tr>
<tr id="el_722">
<td>el_722</td>
<td>el_722</td>
</tr>
<tr id="el_723">
<td>el_723</td>
<td>el_723</td>
</tr>
...
</tbody>
</table>