Задать вопрос
XXXXPro

4X_Pro

Fullstack Web developer
Ответы пользователя по тегу CSS

  • Почему не применяются изменения в адаптиве CSS?

    XXXXPro
    @XXXXPro
    Fullstack Web developer
    Скорее всего, дело в приоритетах правил CSS. Нужно зайти в DevTools, выбрать нужный элемент и посмотреть на вкладке «Стили» справа (по крайней мере, в Chrome она справа), какие CSS-правила оказываются более приоритетными (они будут выше в списке). Ну и если CSS во внешнем файле, то проверить, что подгружается новая версия, а не берётся из кеша старая.
    Ответ написан
    Комментировать
    Комментировать

  • Правильный ли такой подход к подключению css?

    XXXXPro
    @XXXXPro
    Fullstack Web developer
    Вообще, более правильным является такой вариант:
    <link type="text/css" rel="preload" as="style" href="home.css" onload="this.rel='stylesheet'"/>
<script>
// Firefox не грузит стили с preload автоматически, 
// поэтому в конец HTML-кода нужно добавить такое (один раз):
if (navigator.userAgent.indexOf("Firefox")>=0){
var elms = document.querySelectorAll('link[rel=preload][as=style]');
for (i=0; i<elms.length; i++){
elms[i].rel="stylesheet";}}
</script>

    Стоит ли разделять стили — сложно ответить однозначно. Когда файлов много, и часть стилей дублируется, сложнее вносить изменения (приходится дублировать их в каждый файл), зато меньше траффика для пользователя и лучше скорость загрузки. Соответственно, тут нужно смотреть, насколько у раздельных файлов размер меньше, чем у общего. Если в 2—3 раза, а сайт требуется модифицировать редко, то можно разделить. Если на сайте то и дело что-то доделывается, то лучше обойтись одним app.css.
    И ещё: те стили, которые описаны в теге
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать плавающий блок замирающий под header?

    XXXXPro
    @XXXXPro
    Fullstack Web developer
    Навесить обработчик на событие onscroll и смотреть, насколько прокрутилась страница от начала. Т.е. будет что-то вроде такого:
    jQuery('body').on('scroll',function (e) {
  if (jQuery('body').scrollTop()>500) { // вместо 500 поставить отступ среднего блока от верха страницы
    jQuery('.midblock').addClass('fixedblock');
  }
  else {
   jQuery('.midblock').removeClass('fixedblock');
  }
});

    Тут предполагается, что у среднего блока постоянно прописан класс midblock, а когда он переходит в состояние fixed, то добавляется класс fixedblock, в котором прописаны position:fixed и отступ сверху.
    Ответ написан
    2 комментария
    2 комментария

  • Оптимизация css?

    XXXXPro
    @XXXXPro
    Fullstack Web developer
    Я обычно жму до первого варианта: с одной стороны, экономия получается довольно существенная, с другой — код остается относительно читаемым и с ним можно работать напрямую, без постоянного пересжатия из исходной версии.
    Ответ написан
    Комментировать
    Комментировать

  • Верстка геометрических форм?

    XXXXPro
    @XXXXPro
    Fullstack Web developer
    А что мешает вставить в div с position: absolute, у которого height и width заданы в процентах и отрицательным left?
    Ответ написан
    1 комментарий
    1 комментарий

  • Как с помощью CSS(hover) реализовать изменение background-color независимого блока?

    XXXXPro
    @XXXXPro
    Fullstack Web developer
    Думаю, без JavaScript тут не обойтись... А в JavaScript потребуется повесить обработчик на события onmouseover и onmouseout.
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему браузер не видит стили?

    XXXXPro
    @XXXXPro
    Fullstack Web developer
    Да, нужно сделать проверку, что файла не существует. Т.е.
    RewriteEngine on
    RewriteBase /internet-shop/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php
    Ответ написан
    2 комментария
    2 комментария

  • Не отображается svg в хроме через img src - почему?

    XXXXPro
    @XXXXPro
    Fullstack Web developer
    А в других броузерах отображается? Зайдите в консоль разработчка по Ctrl+Shift+J и посмотрите на вкладке Network, корректно ли загружается SVG-файл, нет возникает ли ошибки.
    Ответ написан
    Комментировать
    Комментировать

  • Как плавно загружать содержимое?

    XXXXPro
    @XXXXPro
    Fullstack Web developer
    Я бы сделал следующее:
    1) картинка - обязательно progressive JPEG, а не обычный (и как следует оптимизировать)
    2) CSS не во внешний файл, а прямо в код страницы в тег style
    3) неблокирующая асинхронная загрузка всех JavaScript (но тут придется повозиться, вешая цепочку событий onload)
    Посоветовать что-либо еще, не видя конкретного сайта, довольно сложно.
    Ответ написан
    1 комментарий
    1 комментарий