Интернетчик » site » CSS Reset – кроссбраузерный сброс стилей

CSS Reset – кроссбраузерный сброс стилей

CSS Reset – кроссбраузерный сброс стилей

CSS Reset – первое, что должен увидеть браузер. CSS Reset – кроссбраузерный сброс значения стилей, установленных в браузере по умолчанию – устаревший универсальный прием разработчика, используемый веб-мастерами в начальной стадии создания CSS-файла веб-страницы и считающих


/* https://qna.habr.com/q/990399 */

*,
::before,
::after {
    padding: 0;
    margin: 0;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: geometricPrecision;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Helvetica Neue, sans-serif;

    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}

html,
body {
    height: 100%;
    min-height: 100%;
    font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0, dlig 0;
}

html,
body,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {font-weight: 400;}

h1  {font-size: 2.2em;}
h2  {font-size: 1.9em;}
h3  {font-size: 1.65em;}
h4  {font-size: 1.4em;}
h5  {font-size: 1.2em;}
h6  {font-size: 1em;}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

a:active,
a:hover {
    outline: 0;
}

img {
    border: 0;
}

ul,
li {
    outline: 0;
    border: 0;
    list-style: none;
}

abbr {
    cursor: help;
    font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0, smcp 1, c2sc 1;
}

abbr[title] {
    text-decoration: none;
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

time {
    font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0;
}

small {
    font-weight: 400;
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
    font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0, dlig 0, sups 1;
}

sub {
    bottom: -0.25em;
    font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0, dlig 0, subs 1;
}

svg:not(:root) {
    overflow: hidden;
}

hr {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: "Source Code Pro", Consolas", "Courier New", SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.8em;
    font-feature-settings: kern 0, liga 0, calt 1, dlig 0, pnum 0, tnum 1, onum 0, lnum 1, zero 1;
}

button,
form,
input,
optgroup,
select,
textarea {
    outline: 0;
    color: inherit;
    font: inherit;
}

button,
select {
    border: 0;
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
}

input {
    line-height: normal;
}

input[type="radio"],
input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="number"],
input[type="range"],
input[type="tel"],
input[type="week"] {
    font-feature-settings: kern 0, liga 1, calt 1, pnum 1, tnum 0, onum 0, lnum 1, zero 0;
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
}

textarea {
  resize: vertical;
    overflow: auto;
}

optgroup {
    font-weight: 700;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

tbody,
caption {
    font-feature-settings: kern 1, liga 1, calt 1, pnum 0, tnum 1, onum 0, lnum 1, zero 1;
}

Google AdSense, заявка одобрена

Если одобрена заявка на добавление сайта и аккаунта в рекламную программу Google AdSense, то делать теперь нечего – нужно начинать работать с этой программой (тем более, что я об этом мечтал). Нужно заходить в свой аккаунт, создавать рекламные блоки и вешать их на сайт. После этого – можно начинать ждать полной активации аккаунта и, естественно – «капанья бабла».

Рекламные блоки Google AdSense

Все рекламные блоки, которые можно разместить на своем сайте-площадке от Гугл Адсенс, делится на два типа – рекламные блоки и блоки ссылок. Есть еще поисковые окна, но это для развитых сайтов, на которых есть что искать. И рекламные блоки, и блоки ссылок создаются в аккаунте пользователя Google AdSense, после его активации.

Примечательно, что в аккаунте пользователя Гугл Адсенс можно наклепать сколько угодно рекламных блоков и блоков ссылок. Однако, разместить все эти блоки нужно будет так, чтобы на одной странице сайта одновременно находилось-бы и отображалось-бы не более трех рекламных блоков AdSense и не более трех блоков ссылок этой рекламной программы. В противном случае, это будет считаться нарушением правил участия, со всеми вытекающими последствиями. Как минимум – излишки объявлений не будут отображаться на веб-странице.

Размещение рекламных блоков

Визуально, у Google AdSense нет ограничения на выбор места для размещения рекламных блоков на страницах сайта. Блоки рекламы на странице сайта могут находиться, где угодно – сверху, снизу, сбоку, без разницы. В этом плане, у Google AdSense – полный либерализьм :):):) и демократия. Главное, повторяюсь – не превышать лимит на количество одновременно отображаемых блоков.

При размещении рекламного блока Google AdSense принципиально очень важно, чтобы для него (рекламного блока) было достаточно свободного места в HTML-разметке веб-страницы. Это нужно для того, чтобы рекламный блок не защемил-бы и не перекрыл-бы какой-нить другой блок. В противном случае Гугл сразу выдвинет претензию об изменении размеров рекламного пространства.

Далее. Код AdSense нельзя помещать в недопустимые труднодоступные места, читай – в места с ограниченным доступом. К местам с ограниченным доступом Гугл относит все элементы веб-страницы, для вхождения в которые требуются дополнительные клики. Это могут быть всплывающие окна, спойлеры, сообщения электронной почты или программные приложения. Короче, все страницы, на которых выполняется показ объявлений Google, должны быть легкодоступными и простыми в навигации. Они (страницы) не должны изменять пользовательские настройки браузеров, перенаправлять посетителей на нежелательные сайты, запускать загрузку файлов, содержать всплывающие окна, которые затрудняют просмотр контента и работу с интерфейсом и т.д. В общем, на сайте не должно быть ничего, отвлекающего от его просмотра. Истина, как всегда – в простоте.

Изменение размера рекламных блоков

Чтобы избежать наложения и ущемления рекламных блоков в HTML-разметке веб-страницы шаблона своего сайта – я поместил код блока Google AdSense в другой (вспомогательный) блок (div), который сделал на 2px шире и выше, нежели сам рекламный блок. После этого, я установил для вспомогательного блока рамку border в свойствах CSS <div style="border: #c3c3c3 1px solid;"> и внедрил блок на поле страницы. Посмотрел, не конфликтует-ли мой вспомогательный блок с другими элементами в HTML-разметке. Выставил нужные маржины и паддинги, чтобы было красиво. После этого – убрал border и успокоился.

Google AdSense - правила программы

Поскольку Google AdSense взял в свою программу совершенно неподготовленный мой сайт – пришлось срочно подгонять его (сайт) под правила программы и, прежде всего – «выковыривать» матерщину из комментариев сайта (хорошо, хоть только это).

А вообще, если вчитаться, правила участия в программе Google AdSense мудры и обширны, но не заковыристы. Поистине, огромный текстовый объём правил участия в программе Google AdSense имеет единственную цель – разжевать прописные истины социального сосуществования для своих пользователей и оградить себя от возможных юридических нападок этих самых пользователей, буде такие возникнут.

На самом деле, все правила участия в программе Google AdSense сводятся к соблюдению простых понятий общечеловеческих законов и морали – «не нахами», «не оскорби», «не укради», «не напади» и, конечно-же «не прелюбодействуй» на своём сайте. Сайт должен быть пригодным для семейного просмотра – вот и всё правило. И будет счастье с Google AdSense!

Простота правил в Гугл АдСенс – обманчивые явления. Google AdSense практически не премодерирует сайты-площадки при их приёме в свою рекламную программу. И в процессе работы сайта в программе, тоже – практически не наблюдает за выполнением правил участия. Но! При выплате вознаграждения, особенно – первого вознаграждения, сайт и аккаунт будет проверен самым тщательным образом на соблюдение взятых обязательств.

Скликали сайт в Google AdSense

Одним из самых больших нарушений в любой денежной программе является «накрутка счётчика» с целью получения дополнительной прибыли. Google AdSense – не исключение

Кликать по объявлениям Google AdSense на собственном сайте или стимулировать такие клики у пользователей – строжайше запрещено. Если Google AdSense уличит веб-мастера в таких деяниях – бан сайта (или, аккаунта) в программе обеспечен. Таким образом рекламная программа Google AdSense борется за чистоту перехода по рекламной ссылке и, соответственно – за рациональное расходование денег рекламодателей.

Однако, сия мудрая финансовая политика имеет побочный эффект. Потому как, скликивая рекламные ссылки – конкуренты сайта могут бороться с ним и его владельцем. Особенно на небольших сайтах, где даже несколько кликов с одного IP сразу набирают вес. Конечно-же, нет ничего проще, чем напакостить так – настроил автокликер на сайт конкурента или завистника и скликал всю его рекламу Google AdSense. За это, Google AdSense, сайтец-то забанит и денежки заберёт. Вот и останется товарищ без заработка. Н-да. Незадача.

Но, не всё так печально. Такие страшилки ныне бают на форумах только деды младенцам, да и это уже в прошлом. На данный момент Google легко фильтрует все «левые» клики, даже не ставя при этом владельца сайта в известность. Как только система решит, что идёт накрутка счётчика с какого-то IP – будет включён тайм-аут по IP для обидчика на отображение для него рекламы и кликать ему будет не почем. Ну, а «накликанные» деньги, естественно – будут возвращены рекламодателям. Происходит всё это автоматически, без вмешательства человека.

На всякий случай, нужно почаще заходить в свой аккаунт Google и смотреть на статистику. Если наблюдается резкий и необоснованный прирост активности кликов (CTR) – надо ломиться в сапорт Google, плакаться и рвать волоса.

CTR (аббревиатура от английского Click-through rate) – рейтинг кликов, измеряется в процентах или просто в сотых долях от целого числа. Например, если CTR равен 3% или 0,03 – это значит, что 3 раза из 100 просмотров баннера кликнули по нему. CTR больше 100% или больше 1,00 не бывает. Если ;CTR больше 100% или больше 1,00 – это просто системная ошибка подсчёта голосов. Такая ошибка часто возникает при системной смене даты и, довольно быстро исправляется самой системой.

Как добавить ещё один сайт в Google AdSense

Однажды заполучив аккаунт участника программы Google AdSense, далее можно создавать любые рекламные блоки и добавлять их на любые сайты, которые отвечают правилам этой рекламной программы. Извещать об таком добавлении в Гугл, никого и ни о чём – уже не нужно и не получится. Всё прокатит автоматом. Вот, просто так – взял и создал рекламный блок у себя в аккаунте, а затем – добавил код этого рекламного блока на любой сайт. И, что интересно – это работает и зарабатывает. Зарабатывает, однако – до поры, до времени. Если точно – до времени выплаты денег. А там – как повезёт. Потому что, перед самой выплатой – сайтец-то проверят! И, проверят самым тщательным образом. И, если сайт не соответствует правилам рекламной программы – увы. Это, чтобы значит – интерес рекламодателей не пострадал.

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

Как настроить и оптимизировать блоки

Краткие девизы по настройке Гугл Адсенс, звучат, примерно так:

– В каждое место – свое объявление
– Каждому объявлению – свой канал
– Каждому каналу – свой таргеттинг

Сразу возникает вопрос – а для чего такие сложности, если можно создать один-единственный рекламный блок, безо всяких там каналов, таргеттинга и прочей муры. Потом, чего ещё проще – запихать трижды код этого рекламного блока в шаблон своего сайта, сложить руки и попить пивка, в ожидании денежек? Ведь есть-же маленький секрет от Гугл Адсенс (и не только от него), который гласит – один и тот-же код рекламного блока, трижды вставленный на странице, будет показывать абсолютно разные рекламные объявления. Ну? И для чего здесь мудрить?

А мудрить нужно для того, чтобы найти на своём сайте удачные места расположения для эффективной работы блоков рекламных объявлений – это первое. И, второе – определив такие злачные места, нужно дать возможность рекламной программе подсунуть их благодарным рекламодателям.

А как подсунуть разным рекламодателям один и тот-же код?
Значит, надо изгаляться, чтобы в разных местах стоял разный код.

Таким образом, вся настройка и оптимизация сайта-площадки в Google AdSense сводится к сбору, изучению и систематизации статистики эффективности работы рекламных блоков, расположенных в разных местах на разных страницах веб-ресурса. Такая настройка нужна для выявления злачных (читай, удачных) мест по расположению рекламы. С последующим предоставлением этих удачных мест широкому кругу заинтересованных лиц читай – рекламодателям.

Коню понятно, что окромя самого места расположения, нужно ещё будет подбирать дизайн и размер рекламного блока таким образом, чтобы этот самый рекламный блок органично вписывался в существующее пространство страницы сайта и приносил для неё наибольшую пользу.

При чём, таргеттинг нужно делать всенепременно открытым для рекламодателей, которые обязательно устремятся на сайт в непреодолимом желании разместить свои рекламные объявления.