• Что интересного есть в вашем стандартном шаблоне?

    thecoder
    @thecoder
    Разработчик веб-приложений и сервисов.
    Дополню маленькой хитростью как убрать мелькание при тапе на iOS, когда событие ловится с помощью delegate.
    *{
        -webkit-tap-highlight-color:transparent;
    }
    Ответ написан
    1 комментарий
  • Что интересного есть в вашем стандартном шаблоне?

    @bogomazov_vadim
    Не знаю насколько интересно, но может кому пригодится. Частями найдено на просторах интернета, использую в своем template + normalize.
    Заменяем длинный текст placeholder многоточием:
    input[placeholder]          {text-overflow:ellipsis;}
    input::-moz-placeholder     {text-overflow:ellipsis;} 
    input:-moz-placeholder      {text-overflow:ellipsis;} 
    input:-ms-input-placeholder {text-overflow:ellipsis;}

    Скрываем placeholder при фокусе:
    :focus::-webkit-input-placeholder {color: transparent}
    :focus::-moz-placeholder          {color: transparent}
    :focus:-moz-placeholder           {color: transparent}
    :focus:-ms-input-placeholder      {color: transparent}

    Курсор для label + отмена раздражающего выделения при клике:
    label {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    Только вертикальный ресайз для textarea (horizontal часто ломает диз):
    textarea {
    	resize: vertical;
    }

    Убираем дефолтный курсив у address:
    address {
    	font-style: normal;
    }

    Убираем подсветку полей:
    input:focus,
    textarea:focus {
    		outline: none;
    }

    Адаптивные img:
    img {
    	height: auto;
    	max-width: 100%;
    	width: auto\9;
    }

    Адаптивные видео:
    .video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .video iframe,  
    .video object,  
    .video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    Перенос слов:
    .break-word {
            word-wrap: break-word;
    }

    Обнуляем списки глобально, т.к. часто используется для навигации и проч., в области контента можно задать другие стили.
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }

    Нумерованный список с подпунктами:
    ol {
    	counter-reset: list1;
    
    	li:before {
    		counter-increment: list1;
    		content: counter(list1) '. ';
    	}
    
    	ol {
    		counter-reset: list2;
    
    		li:before {
    			counter-increment: list2;
    			content: counter(list1) '.' counter(list2) '. ';
    		}
    
    		ol {
    			counter-reset: list3;
    
    			li:before {
    				counter-increment: list3;
    				content: counter(list1) '.' counter(list2) '.' counter(list3) '. ';
    			}
    		}
    	}
    }


    update дополнительно стили для печати

    P.S. Что-то конечно юзается не всегда, по желанию лишнее удалить, замечаниям и критике буду рад.
    Ответ написан
    5 комментариев
  • Какая область программирования лучше и интереснее?

    Anonym
    @Anonym
    Программирую немного )
    Не выбирайте никакую. Это не ваше.
    Ответ написан
    2 комментария