Задать вопрос
  • Как лучше оптимизировать css?

    Ankhena
    @Ankhena Куратор тега CSS
    WebforSelf,
    Просто получается что у меня куча однообразных строк
    медиа с размером.

    Не очень понятно, что именно вы хотели этим сказать.
    Развейте, пожалуйста, свою мысль или уточните сомнения.
  • Как лучше оптимизировать css?

    Ankhena
    @Ankhena Куратор тега CSS
    WebforSelf,
    мобайл фест вообще не понятно почему принцип. Т.к. чаще всего мобильную не отрисовывают, а просят оптимально сложить все в ряд.

    1. Посмотрите на долю мобильного трафика.
    2. Браузеру меньше всего обрабатывать. Взял первое правило и отрисовал.
    При desktop-first будет несколько переопределений стилей.

    Не важно что у вас в макете и как его рисовали. Это две разные истории: как рисовать/разрабатывать и как писать стили.
    Так вот, для пользователя экономичнее, когда вы пишете стили в технике mobile-first.

    Я кстати тоже чаще сначала верстаю десктоп, а потом корректирую стили, чтобы в итоге для браузера получился именно mobile-first.
    Если есть оба макета, то сразу пишу и то и то. Но стили всегда mobile-first.
  • Как лучше оптимизировать css?

    Ankhena
    @Ankhena Куратор тега CSS
    Как лучше реализовать это чтоб потом была возможность расширения блоков и не было каши.


    Если в команде или в ТЗ нет изначального кодгайда, то без разницы как.
    Лишь бы единообразно.

    Мне удобно, когда код разбит на блоки. И всё про него написано в одном месте.
    Плюсы:
    + не нужно никуда бегать и искать где от какого селектора media
    + легко взять блок и использовать его в другом проекте, не выковыривая по кусочкам
  • Как сделать плавный переход между табами?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Александр Карасев, так в один клик объедините. У вас сейчас два, по li и по ссылке и в каждом по действию.
    А должно быть одно.

    У вас сейчас очень странная развлекуха для пользователя.
    Клик по меню - скроллит к блоку. Если нужно выбрать другой пункт, то нужно ручками мотать наверх до менюхи. А эта менюха опять отправляет к тому же месту где были (только блок другой показывает). И так по кругу. Меня бы укачало.
  • Ссылка больше картинки. Как исправить?

    Ankhena
    @Ankhena Куратор тега CSS
    Во-первых, я вам уже вчера написала комментарии по этому коду https://qna.habr.com/q/1102990

    Ссылка картинки больше чем сама картинки тем самым перекрывая другую ссылку.

    В вашем коде одна ссылка.

    Не используйте абсолюты для сеток.
    Изучите флексы и гриды.

    К как изменить ширину ссылки .

    Ссылка инлайновая. Инлайны не понимают размеры.
    Нужно сменить display на кого-то из блочных (block, flex, grid) или инлайн-блочных.

    Но либо размер ссылки должен определяться контентом, либо наоборот. В обоих вариантах картинка - не абсолют.
  • Почему не работает background-size у svg?

    Ankhena
    @Ankhena Куратор тега CSS
    Конечно, не работает.
    У вас в сокращенной записи background вообще не указан bg size.
  • Слишком большая фото-ссылка. В чём проблема?

    Ankhena
    @Ankhena Куратор тега CSS
    0. Оборачивайте код тегами <code></code>. Сами же видите, что разметка в вопросе сожралась.

    1. Проверяйте код валидатором. На первых порах он избавит вас от кучи проблем. https://validator.w3.org/nu/

    2. Ваша ссылка не может быть на всю ширину сайта, потому что её единственный ребенок имеет абсолютное позиционирование.
    Я за вас сделала песочницу с кодом https://jsfiddle.net/sgyhxue5/
    Посмотрите, ссылка обведена красным и стоит в уголочке крошечная.

    3. Не стоит использовать абсолюты для всего подряд.
    Для верстки сеток и микросеток изучите основы флексов и гридов.
  • Почему элементы идут не в правильном порядке grid?

    Ankhena
    @Ankhena Куратор тега CSS
    Почему элементы идут не в правильном порядке grid?

    Они идут в правильном. Так, как расположены в коде.

    https://metanit.com/web/html5/13.8.php
  • Как сделать плавный переход между табами?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Александр Карасев,
    на css
    html {
    scroll-behavior: smooth; //плавная прокрутка к якорям
    }


    На js
    https://yandex.ru/search/?clid=9582&text=js+плавны...
  • Как сделать плавный переход между табами?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Александр Карасев, я плохо по скринам понимаю резкость перехода...
    Сделайте песочницу с видимой проблемой на jsfiddle.net
  • Как сделать плавный переход между табами?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Александр Карасев, сейчас вы добавляете класс active.
    Можете ему добавить анимацию с помощью @keyframes или transition.

    Или использовать для скрытия и показа блоков встроенные функции JQ перечисленные в статье и под ней.
  • Как сделать плавный переход между табами?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Читайте и далее.
    Раз уже всё равно JQ.
  • Почему не закрывается модальное окно при повторном нажатии на кнопку?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Dmitriy, например, записать в зону исключения и кнопку тоже, а не только саму модалку.
  • Почему не закрывается модальное окно при повторном нажатии на кнопку?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Потому что она входит в "Убираем модальное окно при клике на другую область".
    Убралось и тут же открылось обратно.
  • Как сделать нужный margin?

    Ankhena
    @Ankhena Куратор тега CSS
    А как вы решили, что это margin?
    Если перестать так думать и заменить его на padding, то и вопрос отпадет.

    Но в любом случае погуглить "схлопывание и выпадение вертикальных margin".
    У гридов и флексов схлопывания, кстати, нет.
    И это тоже один из вариантов решения.
  • Что будет если объявить двум элементам один id?

    Ankhena
    @Ankhena Куратор тега JavaScript
    можно ли объявить двум элементам один id

    Нельзя.

    и допустим через js я получаю через id элемент и я получу только один элемент или сразу два что находятся под одним и тем же id?

    Видимо просто "нельзя" написанного в спеке вам недостаточно.
    Ну раз так, то возьмите и попробуйте, что будет.

    Просто задача условно такая - у меня есть картинка и текст к этой картинки и при определённых условиях мне нужно скрыть эти два элемента одновременно и нужно всё равно это по отдельности делать или можно сделать примерно как я сказал выше или есть лучше варианты ?

    Вы можете внятно объяснить, почему не используете для этого классы? Зачем нужно изобретать велосипед?
    Или почему нельзя в селекторе написать два id (или класса) через запятую?
    Или почему, в конце концов, не воспользоваться data атрибутами?
  • Для чего был сделаны исключения в элементах?

    Ankhena
    @Ankhena Куратор тега HTML
    Тег <p> в HTML это не текст и не параграф в обычном бытовом понимании этого слова.
    Это контейнер для фразового содержания.

    Дальше вам поможет спецификация the-p-element и paragraph

    Ведь мы можем так же присвоить элементу p нужные стили и он нам заменить тот же button

    Да, стилизовать можем.
    И даже можем написать JS, который будет что-то делать при клике на этот p.
    Но кнопкой он от этого не станет.

    У тегов есть свое назначение (семантика). Ведь совсем не все видят страницу глазами. Есть читалки, есть различные роботы, есть управление с клавиатуры и т.д. Чтобы все понимали, что происходит, имеет смысл использовать теги по назначению. Вашим коллегам, кстати, тоже будет легче разбираться в чужом коде.
    Иначе можно было бы всё сверстать div'ами, обвешать JS'ом и дело с концом.

    Для чего сделали разновидность строчно-блочных?

    Блочные начинаются с новой строки и имеют отступы и размеры.
    Инлайновые - идут в строку и не имеют размеров и вертикальных отступов (вертикальные padding имеют, но они работают не так, как вам бы, скорее всего, хотелось).
    Что делать, например, если нужно, чтобы элемент был внутри строки и имел размеры?

    И для чего сделали тег a строчным элементом, если он по факту выходит уже больше строчно-блочным, где мы можем хранить текст или другие блоки.

    Внутрь ссылки можно вставить любой элемент, который можно вставить в его родителя. Ссылки имеют прозрачную контентную модель.
    Но изначально, по умолчанию: ссылка это ссылка в тексте. Посмотрите на второй абзац моего комментария. Просто текст и в нем просто ссылка. Будет странно, если текст прервется, ссылка окажется на новой строке и после неё, опять с новой строки пойдет текст.

    А сам тег img и picture какие?

    Создайте страницу, сделайте разметку, откройте инструменты разработчика в браузере на вкладке Computed и изучите самостоятельно. Если что, для некоторых тегов в разных браузерах может оказаться разный результат.
  • Swiper slide, как убрать отступы для стрелок, когда слайдов меньше и скрипт не работает и стрелки не показывает?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Антон Вебсайтовский, класс.
    Достаточно левой стрелке order -1.
    Остальное и так в правильном порядке стоит.
  • Как сделать так?

    Ankhena
    @Ankhena Куратор тега CSS
    - Clip-path
    - градиентом https://jsfiddle.net/Ankhena/x6y3hgt1/5/
    - псевдоэлементом