09.07.2013, 00:16
|
 |
Кандидат Javascript-наук
|
|
Регистрация: 04.01.2012
Сообщений: 143
|
|
|
Кроссбраузерный <select> без кастомизации + защита своего кода.
Добрый вечер.
Так вышло, что у меня одномоментно возникло 2 вопроса - но для каждого из них создавать отдельный пост я не увидел смысла..
1) Меня заинтересовал следующий момент:
Можно ли организовать кроссбраузерную реализацию тега <select> без помощи JS??
Имею ввиду не сам внешний вид - а именно размеры тега + вертикальное центрирование шрифта?
Для примера есть такая страница:
http://webmaster.ayrveda.ru/Viwall.ru-2/index.html
В шапке есть 2 селекта и мне необходимо что бы размеры и вертикальное центрирование было одинаковым в следующих браузерах(в последних их версиях):
Mazilla, Google Chrome, Safari, Opera, + IE-7,8,9,10!?
Проблема в том, что в ie-7 cелект мне не удаётся вертикально отцентрировать: (c остальными браузерами разобрался.)
http://webmaster.ayrveda.ru/ie_7_selects.jpg
2) Реально ли на сегодняшний день загрузить сайт на свой хостинг и продемонстрировать его заказчику таким образом, что бы он не смог его украсть?)
В том числе и через специализированные программы(например: Фаербаг, Скрапбук и т.п.) ???
Интересно мнение бывалых в этом деле пользователей..
P.S. Буду признателен за любые конструктивные советы по данным вопросам..
Последний раз редактировалось Mike_Kharkov, 09.07.2013 в 00:20.
|
|
09.07.2013, 01:11
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Mike_Kharkov
|
|
В шапке есть 2 селекта и мне необходимо что бы размеры и вертикальное центрирование было одинаковым в следующих браузерах
|
давно использую такой способ стилизации селектов:
<!DOCTYPE html>
<html>
<head>
<style>
.select-wrapper {
position: relative;
overflow: hidden;
border: 1px solid #e8e8e8;
border-radius: 5px;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(to bottom, #fff, #eee);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffff, EndColorStr=#eeeeee, GradientType=0);
box-shadow: 0 0 4px #ccc;
height: 22px;
width: 150px;
margin: 10px;
}
.select-wrapper select {
position: relative;
width: 100%;
opacity: 0;
/** IE7 disable style **/
filter: expression('filter: none;');
-ms-filter: "Alpha(opacity=0)";
z-index: 1;
top: 0;
left: 0;
}
.select-wrapper:before {
position: absolute;
content: attr(data-select-value);
white-space: nowrap;
font-family: Tahoma, Arial;
font-size: 12px;
color: #000;
height: 100%;
width: 100%;
margin: 4px 0 0 5px;
}
.select-wrapper .select-arrow {
position: absolute;
background: inherit;
filter: inherit;
top: 0;
right: 0;
height: 100%;
width: 20px;
}
.select-wrapper .select-arrow:after {
position: absolute;
content: " ";
border: 0;
border-top: 5px solid #aaa;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
width: 0;
height: 0;
top: 50%;
right: 4px;
margin-top: -2px;
}
.select-wrapper select:focus + .select-arrow:after {
border-top: 5px solid #555;
}
</style>
</head>
<body>
<div class="select-wrapper" data-select-value="- select city -">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option>- select city -</option>
<option value="1">Saint-Petersburg</option>
<option value="2">Moscow</option>
<option value="3">New York</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="select-wrapper" data-select-value="option 1">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option value="ololo">option 1</option>
<option value="hehe">option 2</option>
<option value="lalala">option 3</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="select-wrapper" data-select-value="option 1">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option value="ololo">option 1</option>
<option value="hehe">option 2</option>
<option value="lalala">option 3</option>
</select>
<div class="select-arrow"></div>
</div>
<div class="select-wrapper" data-select-value="option 1">
<select onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)">
<option value="ololo">option 1</option>
<option value="hehe">option 2</option>
<option value="lalala">option 3</option>
</select>
<div class="select-arrow"></div>
</div>
</body>
</html>
Правда в ИЕ7 они остаются стандартными, потому как там нет псевдо-элементов after/before... Хотя лично я уже давно положил болт на ИЕ7. В остальных браузерах все пучком. |
|
09.07.2013, 01:24
|
|
Кандидат Javascript-наук
|
|
Регистрация: 04.01.2012
Сообщений: 143
|
|
Я так понимаю что JS код в данной реализации всё же необходим?
Имею ввиду:
onchange="this.parentNode.setAttribute('data-select-value', this.children[this.selectedIndex].innerHTML)"
+
data-select-value="..."
P.S. Но все равно Большое Спасибо! Не знал об этом. Обязательно возьму на заметку..
Последний раз редактировалось Mike_Kharkov, 09.07.2013 в 01:27.
|
|
09.07.2013, 04:51
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
А зачем вы поддерживаете IE7 но совсем забыли про IE6? Число пользователей и контингент примерно одинаковый. Насколько я знаю все уже давно забили как на IE6 так и на IE7, оставляя минимальную поддерживаемую версию - IE8 (ибо XP-шки..)
По второму вопросу - речь про html-страницы? Если заказчик задастся целью, то сохранит исходники себе. Но я таких никогда не встречал.
Можно разве что усложнить ему процесс (до такой степени, что он плюнет на это дело). Но готовых вариантов не подскажу. Был тут чел на форуме, который занимался подобной фигней )
Хотя не, js еще можно запрятать, а вот HTML и CSS можно всегда скопировать в отладчике браузера.
Последний раз редактировалось danik.js, 09.07.2013 в 04:54.
|
|
09.07.2013, 12:57
|
|
Кандидат Javascript-наук
|
|
Регистрация: 04.01.2012
Сообщений: 143
|
|
Сообщение от danik.js
|
А зачем вы поддерживаете IE7 но совсем забыли про IE6? Число пользователей и контингент примерно одинаковый. Насколько я знаю все уже давно забили как на IE6 так и на IE7, оставляя минимальную поддерживаемую версию - IE8 (ибо XP-шки..)
По второму вопросу - речь про html-страницы? Если заказчик задастся целью, то сохранит исходники себе. Но я таких никогда не встречал.
Можно разве что усложнить ему процесс (до такой степени, что он плюнет на это дело). Но готовых вариантов не подскажу. Был тут чел на форуме, который занимался подобной фигней )
Хотя не, js еще можно запрятать, а вот HTML и CSS можно всегда скопировать в отладчике браузера.
|
Дело в том, что IE-7 необходим заказчику, а ie-6 нет.
Насчёт сохранения кода - речь действительно о html страницах. |
|
09.07.2013, 13:15
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
А по ссылке твоя работа? Жесть. Нафига такие классы?
|
Цитата:
|
|
class="menu_index_bottom_navigation menu_margin_left_bottom_navigation_index"
|
И так вся страница. В подвале зачем-то тег <menu> хотя он используется чисто для тубларов и контекстных меню. Для ссылок на страницы используется <nav> |
|
09.07.2013, 15:20
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
С классами понятно.
Что-то ты на какие-то сомнительные источники ссылаешься.
Вот, прочитай тут про использование <menu> - http://www.w3.org/wiki/HTML/Elements/menu
Хотя на htmlbook тоже все правильно написано, ты видимо невнимательно прочел.
|
Сообщение от Mike_Kharkov
|
|
P.S. А вообще, если честно, мне непонятно зачем такая педантичность к этим тегам?
|
Да я вот тоже об этом задумался. Можно ведь вместо <nav> использовать <figure>, вместо <header> прекрасно подойдет <footer>, правда же? А w3c и whatwg сидят и каждый день какой-то фигней занимаются, какую-то там семантику никому не нужную сочиняют.. |
|
09.07.2013, 15:26
|
|
Кандидат Javascript-наук
|
|
Регистрация: 04.01.2012
Сообщений: 143
|
|
|
Сообщение от danik.js
|
С классами понятно.
Что-то ты на какие-то сомнительные источники ссылаешься.
Вот, прочитай тут про использование <menu> - http://www.w3.org/wiki/HTML/Elements/menu
Хотя на htmlbook тоже все правильно написано, ты видимо невнимательно прочел.
Да я вот тоже об этом задумался. Можно ведь вместо <nav> использовать <figure>, вместо <header> прекрасно подойдет <footer>, правда же? А w3c и whatwg сидят и каждый день какой-то фигней занимаются, какую-то там семантику никому не нужную сочиняют..
|
))
Я понял вашу мысль.
Но во первых, на практике, с точки зрения SEO так оно и получается.
(По большому счёту.)
Во вторых - в моём случае я считаю, не настолько всё серьезно, как вы описали. |
|
09.07.2013, 15:34
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
Я всего лишь указал на недочет и как его исправить:
|
Сообщение от danik.js
|
|
В подвале зачем-то тег <menu> хотя он используется чисто для тубларов и контекстных меню. Для ссылок на страницы используется <nav>
|
Про хэдер с футером это конечно уже перебор) |
|
|
|
