Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Коллективная работа » Мобильный стиль. Корректирование и доработка


Мобильный стиль. Корректирование и доработка

Сообщений 1 страница 13 из 13

1

Не пришло в голову куда написать, решил, что это все таки коллективная работа... Ребята, а это что за приколы в мобильном стиле:

@media screen and (max-width: 540px)
mobile.5.css:22
img {
    max-width: 100% !important;
    height: auto;
}

Нафига такие приоритеты на все картинки на всем форуме? Это с расчетом, что перебивать даже не пытайтесь? Итак импортантов хватает... Я не видел мобильный вариант, но... Посмотрел, хватило части (лучше бы не видел):

@media screen and (max-width: 540px) {
    html, body, #pun, .punbb {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    background-size: contain;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    overflow-wrap: break-word;
    float: none;
}
body {
    position: relative;
    background-position: center 0;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: scroll !important;
    z-index: 1;
}

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

Не удержался глянул дальше:

#pun {
    width: 100% !important;
    border-width: 0 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}


Этот файл сервиса: http://forum4.ru/style/mobile.5.css ? - Посмотрел, это файл сервиса... Это надо отключать, и так сложно что-то адаптировать, а с такими раскладами еще и просчитывать импортанты для мобильных стилей.. %-)

Отредактировано kolobdur74 (Вс, 19 Фев 2017 23:37:20)

+1

2

kolobdur74
Ну импортанты легко перебиваются более подробным указанием селектора(собсно ты где-то про это и писал в теме)
К примеру

html img{
  max-width:80%!important;
}

#pun_wrap #pun {
  /*...*/!important;
}

Без !important многие правки для мобилок просто не срабатывают, особенно с учетом того, что юзеры любят пихать кучу кодов -правок в HTML верх, ниже мобильного стиля, тады без !important их не перекрыть(если поменяем - наверняка будут жалобы от юзеров, что форум съехал и т.п)
С другой стороны кнешн согласен, что много импортантов - не Айс, но и без них тут вряд ли обойтись
Автор правок под мобильный стиль - Reysler, он не первый год с css знаком, мон сказать профессионал в этой области(а ты и мну дилетанты, так что мож не оч правильная точка зрения у нас)

Ксать есть тема про мобильный стиль Вопросы по мобильному стилю

0

3

Наверное надо было мне дописать тему по сборке собственного мобильного стиля (для этого я её и создавал). Может добить её на основе существующего от сервиса, но с рядом доработок, убрав лишние important's и меню на выбор пользователя: иконками или текстом.

+4

4

Alex_63, Reysler
Ну, вот я убрал в стандартном все импортанты и посмотрел как работает:
http://s8.uploads.ru/zOeNm.png
http://sh.uploads.ru/VQWbw.png
http://s2.uploads.ru/SPpxz.png
http://s1.uploads.ru/2cdhU.png
http://s4.uploads.ru/DrnPH.png

Ну, и картина мной ожидаемая - всё работает, кроме части правок под браузерные движки, вот на них, если есть необходимость импортанты можно оставить, а со всего остального надо убрать.. Ведь на самом деле уже задано приоритетное правило для данного разрешения: @media screen and (max-width: 540px) { - то есть уже задано, что при данном разрешении работает дизайн под этими скобками, а основной работает, если не противоречит заданным правилам для этого разрешения...

Вот мой файл:

Код:
<link rel="stylesheet" type="text/css" href="http://co.forum4.ru/files/000d/8d/19/35941.css" />

Можно потестить, особенно хорошо бы глянуть с реального устройства...

Alex_63 написал(а):

Ксать есть тема про мобильный стиль Вопросы по мобильному стилю

Не увидел эту тему :blush:

Reysler написал(а):

Наверное надо было мне дописать тему по сборке собственного мобильного стиля (для этого я её и создавал). Может добить её на основе существующего от сервиса, но с рядом доработок, убрав лишние important's и меню на выбор пользователя: иконками или текстом.

:cool:

Alex_63, Reysler просьба - поменяйте название темы к примеру на: Мобильный стиль. Разработка. Или что нибудь подобное..

Отредактировано kolobdur74 (Пн, 20 Фев 2017 13:50:58)

0

5

kolobdur74 написал(а):

Ну, и картина мной ожидаемая - всё работает,

Ну я написал:

Alex_63 написал(а):

юзеры любят пихать кучу кодов -правок в HTML верх, ниже мобильного стиля, тады без !important их не перекрыть

Но в принципе согласен, что нун по возможности минимализировать количество импортантов, я тож попробую - потещу(проверить мобильный стиль сейчас есть с чего, правда там мобильный Msie 10, но в целом понятно будет)

kolobdur74 написал(а):

Alex_63, Reysler просьба - поменяйте название темы к примеру на: Мобильный стиль. Разработка. Или что нибудь подобное..

Назвал Мобильный стиль. Корректирование и доработка  - так норм?

+1

6

Alex_63 написал(а):

юзеры любят пихать кучу кодов -правок в HTML верх, ниже мобильного стиля, тады без !important их не перекрыть

Дык, в теории если те правки не вставлены в @media screen and, то работают только для обычного стиля..

Alex_63 написал(а):

Назвал Мобильный стиль. Корректирование и доработка  - так норм?

Да, нормально :cool:

0

7

kolobdur74 написал(а):

Дык, в теории если те правки не вставлены в @media screen and, то работают только для обычного стиля..

Ну на мобильном-то они тож срабатывают, и скорее всего перекроют то, что прописано в mobile.5.css(если там не будет импортантов)... Хотя не уверен, это тестить нун

0

8

Alex_63 написал(а):

Ну на мобильном-то они тож срабатывают, и скорее всего перекроют то, что прописано в mobile.5.css(если там не будет импортантов)... Хотя не уверен, это тестить нун

С чего они должны перекрыть? Ты задал правило для данного разрешения - оно имеет выше приоритет без правила для данного разрешения, и пофиг где это прописано... А вот с импортантами система приоритетов уже начинает меняться, бо импортант уже можно перкрыть только импортантом у которого селекторов прописано больше и так до пока селекторы не закончились... Исключения - это хаки для браузера, ну на подобии, что мы с тобой недавно сталкивались - перебить цвет импунта - вот такие хаки, да должны быть с импортантами всегда, но в данном файле я их не заметил.. Остальные обычные правила работают, если не противоречат специальным правилам, прописанным под данные разрешения... Вот с таблицами сложнее - систему приоритетов в таблицах, по моему, точно не знают сами разработчики CSS правил... Но протестить на реальных аппаратах тем не менее стоит...

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

Отредактировано kolobdur74 (Вт, 21 Фев 2017 23:19:47)

0

9

kolobdur74 написал(а):

С чего они должны перекрыть? Ты задал правило для данного разрешения - оно имеет выше приоритет без правила для данного разрешения,

Хм, вот это не уверен, что так ( Нун проверить еще

0

10

Ну собсно как говорил так и есть - мобильный стиль, который как бы есть - его нет.. Если для стандартных стилей левой ногой оно как то как бы да, то как только начинаешь менять стандартный стиль, то его надо убирать.. На ровном месте легко проверить на вот этом ресурсе: https://developers.google.com/speed/pagespeed/insights/ Прямо здесь берем техподдержку и смотрим:
http://s4.uploads.ru/oVZw1.png
И берем, не бу ничего показывать - кому надо сам посмотрит - обычный стандартный диз Mybb F430 и отключаем мобильный диз, и он лёгко делает на ровном месте техподдержку... На фига такое счастье? И еще - если это можно отключить, то в новых дизах это приходится просто толпой выбрасывать, как только в них начинаешь что-то менять....  Как не крути, а новые дизы сырые... Кстати, Mybb F430 - диз тоже сырой, но гораздо легче к адаптации, чем последние.. И

.punbb {
    float: left;
    width: 100%;
    height: auto;
}

Можно все таки выкинуть на уровне сервиса, уже как более полугода вроде поднимался вопрос на фига флоат там нужен для всего сервиса?

И еще - все стили, которые а-ля техподдержка не должны идти как стили нормальные - это не те стили, на которые можно опираться... Как пример прямо здесь и навскидку, это что такое:

/* A2.4 */
.punbb img {
  border:none
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* A3.7 */
.punbb address, .punbb em {
  font-style: normal
  }

/* A3.8 */
.punbb .post-content em {
  font-style: italic
  }

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
  }


??? Да по правилам CSS можно точку с запятой не ставить в конце кода, но вы забыли про валидаторы от поисковиков, которые просто такие сайты начинают за это хорошо нагибать... При чем молча в отличии от других валидаторов.. Это не валидный код, а диз запущен как нормальный стандартный... И более того это на техподдержке - какое лицо, ну и т.д. и т.п. По одежке судят...

Я молчу про читабельность кода:
http://s9.uploads.ru/OCwTU.png

Вообщем такие стили желательно поставить как на доработке, которые на свой страх и риск...

P.S. Это лично мое мнение... Если пофиг, то пофиг, но когда то были стили MyBB и были к примеру стили MyFF - и сразу было видно, что есть нормальный стиль, а есть сырой - теперь это на уровне MyBB...

И кстати, уже не первую неделю аплоудс загружает картинки через раз, а то и через два..

Отредактировано kolobdur74 (Пт, 2 Июн 2017 23:10:16)

+1

11

kolobdur74 написал(а):

И еще - все стили, которые а-ля техподдержка не должны идти как стили нормальные - это не те стили, на которые можно опираться... Как пример прямо здесь и навскидку, это что такое:

Это из стандартного шаблона, ибо последние стили ваялись на основе уже существующих - Oxygen и Mybb Bend. По-видимому, эти коды без точки с запятой в конце строки достались оттуда. Проверь, на многих из стандартных стилей точно так же.
Открываем стиль Oxygen и сразу же видим:

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(Oxygen_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
  margin: 0
  }

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;
  }

/* A2.4 */
.punbb img {
  border:none
  }

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
  }

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }

Если уж все это править, то объем работы колоссальный.

kolobdur74 написал(а):

Я молчу про читабельность кода:

Имеется в виду - что каждое правило не обозначено отдельным пунктом?

kolobdur74 написал(а):

И кстати, уже не первую неделю аплоудс загружает картинки через раз, а то и через два..

У меня все нормально с этим, проблему словил только один раз, когда картинка не загрузилась, может опять какой-то диск переполнился

+1

12

Alex_63 написал(а):

Если уж все это править, то объем работы колоссальный.

Попробую, но ближе к зиме..

Alex_63 написал(а):

У меня все нормально с этим, проблему словил только один раз, когда картинка не загрузилась, может опять какой-то диск переполнился

У меня достаточно часто явление, при чем на разных форумах..

+1

13

kolobdur74
По-моему на сервере s3 место закончилось, я отписал Максиму, чтобы проверил(но это не ранее, чем послезавтра), У мну именно на этот сервер картинка не загрузилась, на остальные вродь все грузится

+2


Вы здесь » Единый форум поддержки » Коллективная работа » Мобильный стиль. Корректирование и доработка