Ответы пользователя по тегу CSS
  • Улучшит ли display: none работу сайта?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Думаю, наиболее простое решение, Вашего вопроса:
    0. Обновить гугл хром до последней версии
    1. Нажать F12
    2. Открыть вкладку "Preformance"
    3. Посмотреть эффект "до" и "после" и оценить происходящее :)
    Ответ написан
    Комментировать
  • Как с помощью Jquery нажать элемент при нажатии элемента?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Попробовал вот это:
    .click в JQuery - это обработчик одноименного события, а не его генерация, если Вам нужно сэмулировать клик по элементу, выглядит это примерно так: $('#element').trigger('click'); А вообще, правильно это релизуется - отслеживанием "хеша" (т.е. того, что после '#' в адресной строке) и соотв. реакцией на его изменение. В принципе примерно это же Вам сказал предыдущий оратор :)

    P.S. Подробности про эмуляцию клика.
    Ответ написан
    Комментировать
  • Как работает 1170 сетка бутстрап?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Если честно не совсем понимаю, что за 15 пикселей с каждой стороны сетки от 1170.
    Не могу сказать на 100%, но по моему, это обычные "отступы колонки", с каждой стороны. Т.е. расстояние между колонками соотв. должно быть 15+15px, т.е. 30px.

    Для чего эти паддинги по бокам?
    Это почти риторический вопрос... Но, авторы сетки определенно видели в этом какой-то смысл. Как один из вариантов - что бы контент не "прилипал" к краям дисплея на устройствах с маленьким разрешением, напримр на мобильных.

    Дело в том, что я уже много лет в фотошопе и скетче рисую по сетке 1170 без учета этих паддингов.
    Тут два основных варианта для конечного исполнителя:
    1. Собрать страп-сетку под свои/Ваши нужды, страп-сетка легко кастомизируется, включая примерно все её параметры, от разрешения и ширины колонок до...
    1.1 Убрать эти padding'и с помощью CSS'а, заменив пару соотв. свойств
    2. Не использовать страп-сетку или использовать какую-то другую сетку :)
    Ответ написан
    3 комментария
  • Как не рушить сетку анимацией?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Я думаю 3 варианта:
    1. Задавать элементу рамку изначально, например прозрачную, а потом менять её цвет
    2. border-box
    3. Задавать элементу абсолютное позиционирование, что бы его размеры не затрагивали размеры других элементов
    Ответ написан
  • Насколько смело можно использовать flex-box сегодня и на чем верстаешь ты?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Насколько смело можно использовать flex-box сегодня и на чем верстаешь ты?
    Я использую и пока никто не жаловался. Большинство современных браузеров даже основную часть CSS-Grid'а поддерживает. По сей причине, можно использовать даже его, хотя лично я в восторг от этой спецификации не пришел.

    Конечно же если речь не идет о интернет магазине для которого несколько % клиентов могут вылиться в десятки тысячь долларов убытков.
    Даже не представляю себе такие магазины... В условиях современных реалий, по той причине, что некоторые крупные (очень) интернет-магазины и не только - отказывались нормально работать у пользователей у которых установлен AdBlock, и это не несколько %, а добрая половина пользователей, как минимум...

    А вообще, если у некоего N такой магазин (или другой проект подобного масштаба) - вполне разумно сделать для пользователей "со старым IE" отдельную вёрстку, и выдавать её на основе User-agent, особенно когда речь идёт о десятках тысяч долларов убытков. Такой подход позволить "не ставить раком" тех, у кого к великому счастью не старый IE...
    Ответ написан
    Комментировать
  • Как подменять пути в файлах с помощью gulp?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Думаю, вот это должно Вам помочь. Если мне не изменяет память, когда пользовался Gulp'ом - именно эта штука проводила операции подобные тем, что Вы описали.
    Ответ написан
    2 комментария
  • Правильно ли так прописывать свои стили в Bootstrap 3?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Если не верно, то приведите примеры, как будет верно применить свой класс к элементу.
    Такой подход "верен", если Вы потом в нем сами не запутаетесь. Хотя, с точки зрения здравого смысла моего личного опыта, я бы наверное написал отдельный класс и добавлял бы его куда нужно. Но, как я уже говорил выше - Ваш подход, тоже вполне имеет право на жизнь.
    Ответ написан
    3 комментария
  • Какой jquery плагин лучше использовать?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Magnific popup - помню, он понравился мне за то, что нормально работал в т.ч. на мобильных и довольно быстро работал (в том плане, что пользователю не приходилось ждать пол минуты, пока отработают все эффекты и пр. ерунда).
    Ответ написан
  • Как убрать отступы?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Когда я выставляю нулевые значения, то мои строки игнорируются. Не понимаю в чем дело
    Подозреваю, что дело в том, что стиль который пишите Вы находится на странице выше, чем тот стиль, который задаёт отступы.

    Варианта решения:
    1. Подключить Ваш стиль после того стиля, который задаёт отступы
    2. Использовать !important
    3. Написать более длинный/"точный" селектор, например: header .col-md-6 { ... }
    Ответ написан
    Комментировать
  • Почему многие современные сайты верстают на флексах?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    очень часто вижу такое мнение что построение сеток на основе "float" или "inline-block" лучше, потому что флексы поддерживаются не всеми браузерами. Так ли это и почему в таком случае они так популярны?
    Это действительно так. Но я Вам больше скажу, даже CSS как таковой (или HTML-5), поддерживается не всеми браузерами (IE-1 насколько я помню, CSS не поддерживал). Но я не думаю, что это повод отказаться от CSS или HTML5. И вообще, само по себе выражение "не всеми браузерами" - довольно размытое, что-то из области "не все продукты одинаково полезны".

    и почему в таком случае они так популярны?
    По тому, что они дают довольно большую гибкость, сокращают количество "случайностей" (неожиданного поведения элементов), такой код в целом более читаемый, чем "простыни" из float'ов, и так далее...

    P.S. А ещё по тому, что FLOAT'ы были придуманы изначально не для того, для чего их в последствии приспособили, впрочем как и некоторые другие параметры/свойства/атрибуты...
    Ответ написан
  • Если есть index.php будет ли проиндексирован index.html?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    интересно может ли робот проиндексировать html, ведь по ссылкам попасть туда он не может
    Если Вы где-то не прописывали ссылку на этот файл, например, в sitemap.xml, вряд ли какой-то поисковик будет тратить свои ресурсы, в поисках файлов, которых теоретически на сервере нет. По этому, с вероятностью 99% можно сказать, что проиндексирован он не будет (даже если поисковик, каким-то чудесным образом узнал бы о том, что есть такой файл как "index.html", вряд ли бы он стал его индексировать исходя из тех соображений, что пользователь по ссылкам всё равно не сможет туда попасть).

    Соотв., если Вы хотите, что бы он проиндексировался - нужно добавить на него ссылку (где-нибудь), а если хотите максимально быть уверенным в том, что файл не попадёт в индекс - можете заблокировать доступ к нему в файле robots.txt
    Ответ написан
    Комментировать
  • Какую сетку используете для верстки широких сайтов?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Думаю это должно Вам помочь. Как Вы наверное уже догадались, по данной ссылке Вы можете настроить параметры сетки (и не только) и скачать персональную сборку.

    P.S. Есть подозрение, что pdding'и в 80px проще/удобнее/лучше наложить "поверх" бутстрап-сетки, т.е. дописать немного своих стилей (медиа), которые будут корректировать отступы на нужных Вам разрешениях. Либо, вообще отказаться от страп-сетки и написать всё на "чистых медиа-запросах", что в целом даст куда большую гибкость и меньшее кол-во потенциальных проблем в процессе работы.
    Ответ написан
    Комментировать
  • Можно ли использовать CSS Grid?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Скажите, какие проблему могут возникнуть с использованием css grid? Хочу применить технологию в реальном проекте.


    Из основных проблем, с которыми столкнулся я:
    1. Технология не такая классная, как кажется на первый взгляд
    2. "Физически" - ячеек не существует, по этому задать им например, фон - не получиться (да, я понимаю, что можно задать фон вложенному элементу)
    3. Работать со сложной сеткой - несколько затруднительно, особенно если Вы решите каждой из ячеек дать название
    4. Поддерживается не всеми браузерами и не всегда корректно

    Ну... и как косвенный недостаток - на данный момент не очень удобно отлаживать такую сетку в браузере, более ли менее нормально, из известных мне браузеров, работать в режиме "отладки" с сеткой позволял только FireFox (по крайней мере, до недавнего времени).
    Ответ написан
    2 комментария
  • Что делает фронтендера фронтендером, а не верстальщиком с jQuery?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Что именно позволит верстальщику, "умеющему" (красивое слово) использовать готовые решения и иже с ними переродиться во фронтендера?
    Ну... как Вы понимаете, верстальщик, это человек, который прежде всего занимается вёрсткой, а JQuery и пр. вытекающие - скорее как некоторый "бонус" к изначальной специализации.

    "Фронтэндер" - это человек который полноценно может разработать фронтальную часть сайта не на уровне "вклеить на главную JQuery-слайдер", а именно полноценно сделать фронтальную часть сайта, продумать и реализовать его логику и т.д. Условно, таких разработчиков можно поделить на основании использования каких-то технологий, так же как и "бэкэндеров".

    Кто-то пишет "бекенд" на Си, кто-то пишет на PHP, кто-то на Python, на Ruby и т.д. но любой хороший "бекендер", в зависимости от своей квалификации, знает не только "язык N", (для примера возьмем PHP), но и разбирается в сопутствующих технологиях, начиная от банального понимания логики работы самого PHP и/или понимания (хотя бы частичного) исходного кода PHP, а так же принципах устройства HTTP-протокола, принципах работы сетей и т.д.

    Аналогичным образом, мы можем категоризировать (условно) фронтэнд-разработчиков. Хороший ФЕ умеет не только "верстать и юзать JQuery", но и понимает как этот самый JQuery устроен, знает JavaScript, знаком с какими-то ещё JS-фреймворками, возможно знаком с исходным кодом и/или принципами работы самого JS-движка, знаком с сопутствующими технологиями (простейший пример - вебсокеты), возможно знаком с БД и так далее...

    Соответственно, хороший верстальщик - это специалист который хорошо занимается именно вопросами вёрстки, в том числе знаком с сопутствующими технологиями на должном для него уровне (например, SASS, Stylus, Gulp и т.д.), умеет "правильно втыкать JQuery на страницу", знает какой плагин слайдера лучше взять и почему, знает какие стилевые особенность есть в том или ином браузере и т.д.

    Чисто гипотетически, ФЕ-разработчик может не заниматься вёрсткой вообще или делать это в минимальных объёмах, хотя эта картина конечно слабо рисуется в сознании, но в некоторых крупных компаниях существует и такая практика. Что в свою очередь свойственно и для БЕ-разработчиков, например, БЕ-разработчик может заниматься исключительно разработкой основной логики программы и практически не касаться БД (базы данных), т.к. за базу данных (написание запросов, их отладку и т.д.) отвечает другой специалист, а за построение структуры БД, её администрирование и поддержание в рабочем состоянии - третий и т.д.
    Ответ написан
    2 комментария
  • Как правильно писать адаптивный код?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Я знаю как через медиа запросы адаптивить обычную страницу,при портретной ориент-ции блоки могут скакать ? или не умещаться ? Какие подводные камни мб ?
    Никаких подводных камней, я Вам даже больше скажу, в подавляющем большинстве случаев - страницу адаптирует конкретно по ширине, без учёта ориентации устройства. Но, если Вам вдруг (по какой-то причине) понадобилось адаптировать страницу (или её часть) конкретно в зависимости от ориентации устройства, делается это следующим образом:

    0. Не забывайте про такой параметр как "ширина", точно так же, как Вы это делаете при адаптиции страницы без учёта ориентации устройства
    1. Открываете любую документацию/справочник, например вот или вот
    2. Находите там примеры, по ключевому слову "orientation"
    3. Дополняете "обычные" медиа-условия, например такие как: @media screen and (max-width: 640px) таким параметром как "orientation"
    4. Пишите соответствующие стили
    5. Готово

    Вот в принципе и весь процесс, и от "обычной адаптации" страниц он мало чем отличается.
    Ответ написан
    Комментировать
  • Как установить ширину div чтобы div которые находятся внутри не выходили за рамки этой ширины?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Как установить ширину div чтобы div которые находятся внутри не выходили за рамки этой ширины?
    Думаю, вот это ответ на Ваш вопрос. В данном конкретном случае, Вам нужен последний CSS-блок (строки 18-20).
    Ответ написан
  • Работать дальше с png или перейти на SVG?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Что лучше использовать SVG или PNG для Логотипа ?
    Лучше, подозреваю, что SVG. Так как SVG - это векторный формат и он хорошо выглядит на любом разрешении, в т.ч. на телефонах, у которых разрешение физическое может быть очень высоким, а фактическое - в несколько раз меньше.

    К тому же, SVG обычно меньше занимает и т.д.

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    То бишь текст "рыба" должен растянуться по ширине блока "рыбак".
    Либо задать одинаковую ширину обоим блокам, одинаковую - в буквальном смысле.

    Либо родительский блок должен быть нужной ширины, тогда вложенный блок будет 100% ширины родительского.

    Либо, через JS.
    Ответ написан
  • Как сделать такой hover на input?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Как сделать такой hover на input?
    Вас именно hover интересует? Такой hover можно сделать через backgroud-картинку.

    Есть ещё "маска ввода", например в виде плагина для JQuery, вот одна из них.
    Ответ написан
    Комментировать
  • Почему не реагирует сенсор на определённую область на странице сайта?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    В принципе, наиболее вероятную причину происходящего (а в большинстве случаев и единственную) Вам уже описал предыдущий автор, но от себя хотелось бы добавить вот что:

    Для FireFox, есть очень полезный инструмент, отображающий страницу в формате 3Д, на котором можно отследить какой слой под/над каким находится и так далее. Иногда - очень выручает. Начиная с версии FireFox-47 он доступен в виде отдельного модуля. Подробности, ссылки, скриншоты и т.п.

    *В Вашем случае, эта шутка наверняка сможет показать, какой слой физически перекрывает тот, что Вам нужен.
    Ответ написан
    Комментировать