Ответы пользователя по тегу HTML
  • Как правильно тестировать адаптивную верстку?

    lamo4ok
    @lamo4ok
    Программист
    Эмуляторы мобильного устройства в браузерах - это не решение проблемы, так как в итоге в них используется не отдельный движок под ту конкретную модель, которая выбрана для эмуляции, а все тот же десктопный движок, правда передающий другие параметры сайту. Тестирование моб. верстки в полноценном режиме возможно в трех случаях:
    С самих устройств.
    С эмулятора, предоставляемого самой компанией, которая разрабатывает нужную ОС.
    С эмуляторв, аналогичным из предыдущего пункта, к которым предоставляется доступ через интернет различными сервисами. Платно, но полноценно. Как пример, saucelabs.com. Также, есть сервисы с тестированием на реальных устройствах, например - browserstack.com.
    Ответ написан
    Комментировать
  • Как наиболее кроссбраузерно и кроссплатформенно заверстать одинаковые по высоте и выравниваемые по центру строки блоки?

    lamo4ok
    @lamo4ok Автор вопроса
    Программист
    В общем, проведя различные тесты и почитав что писали выше, пришел к выводу, что единственно верное решение все-таки скрипт плюс верстка. Вот код скрипта:

    $('.products_row').each(function(){
    		var arr = new Array;
    		$(this).find(".products_grid").each(function(){
    			arr.push($(this).height());
    		});
    		$(this).find(".products_grid").css("height", Math.max.apply(null,arr)+"px");
    	});


    Этот код решает проблему с одинаковой высотой в IE и Mozilla. То, что ниже - с выравниванием блоков посередине.

    Код html:

    <div class="products_wrapper">
        <div class="products_row">
            <div class="products_grid"
                 style="background-image: url(blah_blah.png);">
                <div class="products_title">
                    <p>blah_blah<br>
                        blah_blah<br>
                        blah_blah<br>
                        blah</p>
                </div>
                <div class="products_text">
                    <h6>blah_blah</h6>
                    <p>blah_blah</p>
                </div>
                <a href="#contact-form" class="products_order">blah_blah</a>
            </div>
            <div class="products_grid"
                 style="background-image: url(blah_blah.png);">
                <div class="products_title">
                    <p>blah_blah<br>
                        blah_blah<br>
                        blah_blah<br>
                        blah</p>
                </div>
                <div class="products_text">
                    <h6>blah_blah</h6>
                    <p>blah_blah<br>
                          blah_blah<br>
                          blah_blah<br>
                     </p>
                </div>
                <a href="#contact-form" class="products_order">blah_blah</a>
            </div>
            <div class="products_grid"
                 style="background-image: url(blah_blah.png);">
                <div class="products_title">
                    <p>blah_blah<br>
                        blah_blah<br>
                        blah_blah<br>
                        blah</p>
                </div>
                <div class="products_text">
                    <h6>blah_blah</h6>
                    <p>blah_blah<br>
                          blah_blah<br>
                     </p>
                </div>
                <a href="#contact-form" class="products_order">blah_blah</a>
            </div>
        </div>
        <div class="products_row">
            <div class="products_grid"
                 style="background-image: url(blah_blah.png);">
                <div class="products_title">
                    <p>blah_blah<br>
                        blah_blah<br>
                        blah_blah<br>
                        blah</p>
                </div>
                <div class="products_text">
                    <h6>blah_blah</h6>
                    <p>blah_blah<br>
                          blah_blah<br>
                          blah_blah<br>
                          blah_blah<br>
                     </p>
                </div>
                <a href="#contact-form" class="products_order">blah_blah</a>
            </div>
            <div class="products_grid"
                 style="background-image: url(blah_blah.png);">
                <div class="products_title">
                    <p>blah_blah<br>
                        blah_blah<br>
                        blah_blah<br>
                        blah</p>
                </div>
                <div class="products_text">
                    <h6>blah_blah</h6>
                    <p>blah_blah<br>
                          blah_blah<br>
                          blah_blah<br>
                          blah_blah<br>
                     </p>
                </div>
                <a href="#contact-form" class="products_order">blah_blah</a>
            </div>
        </div>
    </div>


    Код css (less):

    .products_wrapper {
        width: 100%;
        margin: auto;
        .products_row {
          display: inline-table;
          width: 100%;
          padding-bottom: 20px;
          box-sizing: content-box;
          text-align: center;
          .products_grid {
            display: inline-table;
            max-width: 29%;
            min-height: 100%;
            margin: 0 1%;
            padding: 10px;
            cursor: crosshair;
            .products_title {
              display: table-row;
              p {
                padding: 5px;
              }
            }
            .products_text {
              display: table-row;
              min-height: 100%;
              h6, p {
                padding: 5px;
              }
            }
            .products_order {
              display: table-row;
              min-width: 100%;
              height: 35px;
              padding: 10px;
              text-align: center;
              font-size: 26px;
              line-height: 35px;
            }
          }
        }
      }


    Многовато вышло в итоге кода, но кому нужно - разберется. Важно! Данный код не является решением для адаптивной верстки под устройства с различными экранами, ее нужно дописать отдельно.
    Ответ написан
    Комментировать
  • Как добавить игнорирование компиляции less в gulp?

    lamo4ok
    @lamo4ok
    Программист
    1. gulp-filter / gulp-ignore. Первый обрабатывает только указанное, второй игнорирует.
    2. использовать маску, что-то вроде:
    var src = {
        root    : 'src',
        sass    : ['src/sass/**/*.scss', '!src/sass/**/_*']
    }
    Ответ написан
    Комментировать
  • Как изменить размер блоков в Wordpress?

    lamo4ok
    @lamo4ok
    Программист
    Тут есть три варианта решения, через HTML+CSS, через JS и через PHP.

    В первом случае я бы посоветовал вам копать в сторону обрезания содержимого блоков через overflow, overflow-text и так далее. Есть и еще один вариант через HTML, когда вы будете не обрезать блоки, а выстраивать из них такую сетку, где один блок не будет налезать на другой, как у вас это сейчас. Это можно сделать через CSS flexbox.

    Во втором случае вы можете как сами написать некий код, который будет изменять текст блоков и/или их размеры, так и воспользоваться различными библиотеками, например - Masonry. Руководство можно сразу взять тут.

    В третьем случае все совсем просто - вам нужно текст, который меняется в зависимости от блока, обрезать по длине, выводя первые его 300, например, символов. Чтобы прочитать остальное, можно предлагать пользователю ссылку "Далее..." и перенаправлять его на отдельную страницу объявления, которые у вас уже реализованы.
    Ответ написан
    1 комментарий
  • Почему стили подключаются не в том порядке?

    lamo4ok
    @lamo4ok
    Программист
    Есть такое понятие, как вес селектора. Вообще, то, как применяются правила, выглядит примерно так:

    Сначала определяется вес селектора.
    Потом смотрится, не перебивается ли это !important.
    При прочих равных применяются правила, которые расположены в коде последними, тут также учитывается и порядок линкования файлов css.

    Исправить ситуацию можно несколькими путями:
    1. Попробовать добавить !important.
    2. Попробовать увеличить вес селекторов, добавив id.
    3. Попробовать уменьшить вес селекторов, которые перебивают нужный код.

    Сам развесовка такова (есть по ссылке более подробно):

    style="" 1,0,0,0
    #id 0,1,0,0
    .class 0,0,1,0
    [attr=value] 0,0,1,0
    LI 0,0,0,1
    * 0,0,0,0
    Ответ написан
    Комментировать