css заметки

gistfile1.md

.parent { height: auto; width: 200px; border: 1px solid red; }

.child { padding-top: 100%; border: 1px solid blue; }

window.opener when click link with target blank, if u want disable it need use rel=nofollow

:matches(header, main, footer) p:hover { color: red; cursor: pointer; }

tranform3D(x, y, 0) вместо transform(x, y)

translateZ(0) will change Функция componentWillMount, вместо которой предлагается использовать componentDidMount. Функция componentWillUpdate, которую заменит componentDidUpdate. Функция componentWillReceiveProps . В качестве заменителя этой функции предлагается новая статическая функция getDerivedStateFromProps.

В свете вышесказанного не стоит впадать в панику, так как эти функции всё ещё можно использовать. Уведомления о том, что данные функции устарели, появятся в React 16.4, а их удаление запланировано в 17-й версии React.

http://demo.webcareer.ru/2016/03/height-equal-width/index.html transform: scaleY(0) transform-origin: top

перенос строк

user-select: none; pointer-events: none column-count max-width: max-content; min-content clip backgrpund: mask will-change: auto; - оптимизация движущиеся анимации visibility hidden - скрывает блок но оставляет его размеры word-break: break-all; white-space: pre-line;

design: line-height - правило золотого сечения - font-size * 1.5

woff2 в двара меньше весит чем woff поэтому раньше потом woff поддерживает начиная от ие9

Одиночным тегам нельзя задавать :after or :before

$pixel2: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1)";

$pixel3: "only screen and (-webkit-min-device-pixel-ratio: 3), only screen and ( min--moz-device-pixel-ratio: 3), only screen and ( -o-min-device-pixel-ratio: 3/1)";

.loc { color: $SubText; font-size: 17px; font-family: "RobotoRegular", sans-serif; text-decoration: line-through; @media #{$pixel2}{ font-size: 18px; } @media #{$pixel3}{ font-size: 19px; } }

@media only screen and (max-width : 768px) { .animated { /CSS transitions/ -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; /CSS transforms/ -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; /CSS animations/ -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; } }

.total-block > h1, .total-block > h2, .total-block > h3, .total-block > h4, .total-block > h5, .total-block > h6 { margin: 0 auto; padding-top: 0; padding-bottom: 0; max-width: 980px; font-size: 2.1875rem; font-weight: bold; font-family: "PT Serif", serif; text-align: center; color: #1c1c1c; } .total-block > * { margin: 0 auto; / padding-top: 24px; / padding-top: 10px; max-width: 1260px; font-size: 1.0625rem; font-weight: 400; font-family: "Open Sans", sans-serif; line-height: 1.7; text-align: center; color: #555555; }

jquery

!!!TABS

Вкладка 1 Вкладка 2 Вкладка 3

Содержимое 1

Содержимое 2

Содержимое 3

.wrapper .active { color: red; }

$('.tab_item').not(':first').hide(); $('.tab').click(function() { $('.tab').removeClass("active").eq($(this).index()).addClass("active"); $(".tab_item").hide().eq($(this).index()).fadeIn() }).eq(0).addClass("active");

!!!Accordeon

Заголовок 1

Content 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam ea, accusamus. Numquam non commodi ipsum debitis repudiandae amet vero itaque, deserunt, ad neque libero quae officia. Facilis non, possimus doloribus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quis voluptatem repellat? Blanditiis iste, exercitationem porro, magni amet cupiditate enim, labore tenetur, praesentium quam consequuntur nesciunt. Culpa dicta adipisci voluptatem.

Заголовок 2

Content 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quis voluptatem repellat? Blanditiis iste, exercitationem porro, magni amet cupiditate enim, labore tenetur, praesentium quam consequuntur nesciunt. Culpa dicta adipisci voluptatem.

Заголовок 3

Content 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quis voluptatem repellat? Blanditiis iste, exercitationem porro, magni amet cupiditate enim, labore tenetur, praesentium quam consequuntur nesciunt. Culpa dicta adipisci voluptatem.

$(".accordeon dd").hide().prev().click(function() { $(".accordeon dd").not(this).slideUp().prev().removeClass("active"); $(this).next().not(":visible").slideDown().prev().addClass("active"); }).eq(0).addClass("active").next().show();

.accordeon .active { color: red } .accordeon dt { cursor: pointer }

!!!equal Height

This is
the highest
column

One line

Two
lines

One line

Two
lines

One line

$(document).ready(function(){

var highestBox = 0;
    $('.container .column').each(function(){  
            if($(this).height() > highestBox){  
            highestBox = $(this).height();  
    }
});    
$('.container .column').height(highestBox);

});

ionic на мобиле использует движок хромиум и отображает веб сайт через веб вью браузер - и можно использовать все css свойства react native компилит весть js html css code в java or object-c/swift

// My Icon option ion-icon { &[class*="appname-"] { mask-size: contain; mask-position: 50% 50%; mask-repeat: no-repeat; background: rgb(0, 200, 193); width: 23px; height: 23px; } &[class*="appname-customicon-login"] { mask-image: url(../assets/icon/login.svg); } &[class*="appname-customicon-register"] { mask-image: url(../assets/icon/register.svg); } &[class*="appname-customicon-24-hours"] { mask-image: url(../assets/icon/24-hours.svg); } &[class*="appname-customicon-information-signal"] { mask-image: url(../assets/icon/information-signal.svg); } &[class*="appname-customicon-information-verification"] { mask-image: url(../assets/icon/verification.svg); } } Login

IPHONE10X Чтобы начать, найдите метатег viewport в вашего сайта и добавьте в content атрибут viewport-fit=cover.

CSS Мы хотим применить padding к элементам, которые закрыты датчиком. Хорошо, Apple предоставила функцию CSS и некоторые предопределенные переменные CSS, чтобы позаботиться об этом: env() и safe-area-inset-*.

Поскольку env () доступен только для устройств под управлением iOS 11.2+, вам также необходимо включить constant() для поддержки других устройств. Похоже, что iOS 11.2 будет продолжать поддерживать constant(), поэтому можете использовать только это, но я рекомендую вам включить оба.

Я понимаю, что это звучит немного сложно - функции и переменные в CSS? Но реализация такая же, как и для любых других пары значений свойств в CSS:

.container { /* Fallback / padding:0 10px; / iOS 11 / padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); / iOS 11.2+ */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } Вам, скорее всего, потребуется поэкспериментировать, чтобы найти лучшее место для применения этих новых стилей, так как оно будет сильно отличаться в зависимости от вашего дизайна. В нашем случае мы хотим, чтобы цвета фона заполняли экран, а содержимое разместилось в области safe area, поэтому мы применили отступы к внутренним элементам наших контейнеров.

Совет. Используйте инструменты разработчика Safari на вашем Mac для проверки элементов в Safari iOS Simulator (или на любом подключенном устройстве iOS). .container { /* env() for iOS 11.2+, otherwise constant() */ padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }