Мы вернулись со второй записью в серии Nettuts + Q & A. Сегодня мы обсуждаем разницу между LESS и Sass, как передавать значения на стороне сервера в ваш JavaScript, как работать с PHP и файлами cookie, а также тип документа HTML5. Вот так!
1. Меньше и дерзко.
Привет Неттутс +. Я не совсем понимаю. В чем разница между LESS и Sass ? Они одинаковы?
Есть преимущества использования обоих; однако правда в том, что оба прекрасно справятся с работой. В основном это становится предпочтением, когда дело доходит до синтаксиса и тому подобного. В прошлом многие предпочитали LESS, потому что он имел более дружественный CSS-подобный синтаксис, хотя, начиная с Sass 3, у них появился новый синтаксис, известный как SCSS (Sassy CSS), который является просто подмножеством синтаксиса CSS3.
Разработчики Envato используют Sass . Другие популярные разработчики предпочитают LESS . Я бы приравнял это к сравнению CSS-фреймворка 960 с Blueprint . Они оба великолепны; так что решайте сами. Там нет неправильных ответов!
Хотите узнать больше о LESS на Nettuts + ?
2. Со стороны сервера на сторону клиента
Я пытался выяснить, как передать значение переменной PHP в мой JavaScript. Как мне это сделать? Благодарность!
Самое быстрое и простое решение — отобразить нужную переменную из вашего JavaScript. Например, вы можете запросить базу данных MySQL с помощью PHP, а затем передать возвращенное значение в JavaScript, выполнив что-то вроде:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<?php $myvar = ‘some value’;
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»utf-8″>
<title>Tut</title>
</head>
<body>
<script>
var myvar = ‘<?php echo $myvar;?>’;
alert(myvar);
</script>
</body>
</html>
|
3. Пользовательские таблицы стилей с PHP
Как динамически выбрать таблицу стилей цветовой схемы для моего сайта?
Так что вы хотите, например, выбрать red.css или blue.css , и это будет загружать другую цветовую схему для вашего сайта. Это то, что вы имели ввиду? Конечно, есть несколько способов выполнить эту задачу, и правильный выбор будет зависеть от того, используете ли вы фреймворк, CMS, MVC и т. Д. Давайте сделаем все просто и как можно проще. Мы можем использовать sessions PHP. Во-первых, нам нужно добавить поле select , чтобы пользователь мог выбрать желаемую таблицу стилей цвета.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»utf-8″>
<title>Tut</title>
</head>
<body>
<h2> Choose your Stylesheet </h2>
<form method=»post» action=»»>
<select name=»colors»>
<option value=»default»>Default</option>
<option value=»red»>Red</option>
<option value=»green»>Green</option>
</select>
<input type=»submit» name=»submit» value=»Go» />
</form>
</body>
</html>
|
Затем, с помощью PHP, мы будем слушать, была ли страница отправлена назад — или была ли нажата кнопка « Submit ». На такой простой странице мы можем использовать полезный $_SERVER['REQUEST_METHOD'] .
«Метод запроса» определяет, какой метод запроса использовался для доступа к странице: «GET», «HEAD», «POST», «PUT» »
В верхней части вашей страницы добавьте следующее:
|
01
02
03
04
05
06
07
08
09
10
11
|
<?php
if ( $_SERVER[‘REQUEST_METHOD’] == «POST» ) {
// page has posted back
}
else {
// user hasn’t submitted the form
}
?>
<!DOCTYPE html>
|
Поскольку теперь мы можем подтвердить, когда страница была отправлена обратно, мы можем затем создать session и сохранить значение того, что пользователь выбрал из поля выбора.
|
1
2
3
4
5
6
7
8
9
|
<?php
session_start();
if ( $_SERVER[‘REQUEST_METHOD’] == «POST» ) {
$_SESSION[‘color_scheme’] = $_POST[‘colors’];
}
else {
$_SESSION[‘color_scheme’] = ‘default’;
}
?>
|
Здесь мы сначала создаем новый сеанс PHP с помощью session_start() . Затем мы создаем новый ключ с $_SESSION , называемый «color_scheme». Не стесняйтесь назвать это, как вы хотите. По умолчанию мы устанавливаем это значение по умолчанию (см. Инструкцию «else»). Это означает, что, если пользователь не выбрал таблицу стилей, мы будем использовать таблицу по умолчанию. Однако, если они сделали выбор, нам нужно определить, какой вариант select из select элемента select , и сохранить его в ключе сеанса.
Возвращаясь к разметке, вы обнаружите, что мы применили name «colors» к элементу select .
|
1
2
3
4
5
|
<select name=»colors»>
<option value=»default»>Default</option>
<option value=»red»>Red</option>
<option value=»green»>Green</option>
</select>
|
Когда страница вернется назад, выбранное значение этого элемента select будет доступно нам через $_POST['colors'] . Например, если я выберу «зеленую» опцию, $_POST['colors'] будет тогда равно «зеленой».
Без сеансов и файлов cookie не было бы возможности «запомнить» это выбранное пользователем значение. Вот почему они необходимы в этом случае. Теперь, когда $_SESSION['color_scheme'] хранит наше желаемое значение, нам нужно только загрузить соответствующую таблицу стилей.
|
1
2
3
4
5
|
<head>
<meta charset=»utf-8″>
<title>Tut</title>
<link rel=»stylesheet» href=»<?php echo $_SESSION[‘color_scheme’];?>.css» />
</head>
|
4. Элементы округлой формы
Привет Nettuts +! Как создать входные данные с округлыми формами с помощью CSS для всех браузеров?
Таким образом, вы хотите стилизованные округлые вводы во всех браузерах, включая Internet Explorer? Оки Доки. Рассмотрим следующую простую разметку:
|
1
2
3
4
5
6
|
<form>
<label for=»name»>Name: </label>
<input type=»text» name=»name» />
<input type=»submit» value=»Go» />
</form>
|
Используя простой CSS3, мы можем создать закругленные углы для этих входов. Поскольку некоторые браузеры получили преимущество в спецификации, нам нужно использовать -webkit вендора -moz и -webkit , а также официальную версию свойства border-radius.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<style>
input {
border: 1px solid #666;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
input[type=submit] {
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}
</style>
|
- -moz : браузеры Mozilla (Firefox)
- -webkit: браузеры Webkit (Safari, Chrome)
Указав атрибут типа
submit, этот последний фрагмент будет предназначаться только для кнопок отправки и будет соответствующим образом оформляться.
Это взорвали IE
К сожалению, как вы, наверное, догадались, Internet Explorer — это придурок. Хотя в предстоящем IE9 есть поддержка border-radius (без префикса), более старые версии все еще находятся в замешательстве. На данный момент у вас есть два варианта:
- Игнорируй это. Мир не закончится, если ваши читатели увидят углы 90 градусов.
- Изображение Fallback. Вы можете настроить таргетинг на Internet Explorer и применить округлое фоновое изображение.
Modernizr
Я предполагаю, что задающий этот вопрос требует последовательности; поэтому мы пойдем со вторым вариантом. Давайте предположим, что вы будете интенсивно работать с CSS3 и HTML5 в своем проекте. В этом случае, вместо использования таблицы стилей только для IE, почему бы не повеселиться и воспользоваться полезной библиотекой Modernizr ?
Сначала загрузите Modernizr и обратитесь к файлу modernizr.js в своем проекте.
|
1
2
3
4
5
|
<head>
<meta charset=»utf-8″>
<title>Tut</title>
<script type=»text/javascript» src=»modernizr-1.5.min.js»></script>
</head>
|
Затем примените класс no-js к элементу Html на своей странице.
|
1
|
<html lang=»en» class=»no-js»>
|
Когда вы просматриваете свой проект в браузере, Modernizr применяет длинную строку классов к элементу Html , который точно указывает, на что способен ваш браузер. Обратите внимание, что, очевидно, этот список классов будет варьироваться в зависимости от браузера.
Это огромная помощь! Теперь мы можем использовать эффект «каскад», чтобы нацеливаться только на элементы формы, которые являются потомками элемента html с классом «no-borderradius» и соответственно соответствующим стилем.
Если браузер не поддерживает определенную функцию, перед правилом будет добавлено слово «нет».
|
1
2
3
4
|
/* Only targets browsers which don’t support border-radius */
.no-borderradius input {
background: url(path/to/rounded/background/image) no-repeat;
}
|
А потом мы расслабимся и выпьем торт.
5. Типы документов
Я заметил, что вы всегда используете тип документа HTML5. Не думаете ли вы, что это опасно, когда все браузеры еще не поддерживают HTML5?
Нет, это совсем не опасно. Для тех, кто не знаком с удивительно простым доктрипом HTML5, это:
|
1
|
<!DOCTYPE html>
|
Серьезно … вот и все. Это все, что нужно сделать. Больше нет многострочных списков атрибутов; просто обычный олектоп — как и должно быть. В старых браузерах этот тип документа запускает их в standards-mode . … И если вы все еще волнуетесь, обратите внимание, что даже Google использует это! Нужно больше? Джон Резиг говорил об этом 2,5 года назад !
«Что приятно в этом новом DOCTYPE, тем более, что все текущие браузеры (IE, FF, Opera, Safari) будут смотреть на него и переключать контент в стандартный режим — даже если они не реализуют HTML5. Это означает, что вы могли бы начните писать свои веб-страницы, используя HTML5 сегодня, и прослужите им очень и очень долго ».
— Джон Резиг
Прочитайте предыдущие вопросы и ответы
Спроси Nettuts + …
Если у вас есть «не слишком сложный» вопрос веб-разработки для нас, вы можете:
- Напишите [email protected] и напишите «Web Dev Q & A» в качестве темы письма.
- Чирикать нам @nettuts и хэш «#askNettuts».
- Оставьте комментарий под любой публикацией «Web Dev Q & A» с вашим новым вопросом.
Спасибо за чтение и просмотр!