CSS Guru http://starhack.ru Верстка сайтов, использование CSS, Javascript, jQuery, веб-разработка Fri, 12 Mar 2021 11:33:49 +0000 ru-RU hourly 1 https://wordpress.org/?v=5.7.7 Window.getComputedStyle() of pseudo elements. http://starhack.ru/window-getcomputedstyle-of-pseudo-elements/ http://starhack.ru/window-getcomputedstyle-of-pseudo-elements/#respond Fri, 12 Mar 2021 11:33:47 +0000 http://starhack.ru/?p=1289 Читать далее Window.getComputedStyle() of pseudo elements.]]> Возникла необходимость получить размер псевдоэлемента (:after) в js коде.

Для этого есть простая возможность:

window.getComputedStyle(element, pseudoElt);

Где pseudoElt это строка с именем псевдоэлемента.

Прочитал документацию, примеры смотреть не стал, написал:

window.getComputedStyle(element, 'after');

Проверил в хроме, всё работает. И на этом закончил.

Через некоторое время, что сопутствующая функциональность не работает в Файрфоксе. Расстроился, полез смотреть. Не мог ничего понять, полез искать в сети. В том числе посмотрел примеры из доков. Всего-то, что и надо было это pseudoElt писать, так сказать полностью, вот так:

window.getComputedStyle(element, ':after');

Не хватало двоеточия перед именем псевдоэлемента. Хром же подстроился под пользователя, и понял, что я хотел. Файрфокс, как и всегда, оказался занудой.

Читайте доки внимательнее. Не пропускайте детали. Будьте аккуратнее. Проверяйте в нескольких браузерах.

]]>
http://starhack.ru/window-getcomputedstyle-of-pseudo-elements/feed/ 0
Простой лоадер на чистом CSS http://starhack.ru/prostoj-loader-na-chistom-css/ http://starhack.ru/prostoj-loader-na-chistom-css/#respond Sun, 17 Jan 2021 13:13:00 +0000 http://starhack.ru/?p=1276 Нашел в своем codepen, уж и забылось когда и зачем.

See the Pen fade loading by Sergey Kirichenko (@oknechirik) on CodePen.

]]>
http://starhack.ru/prostoj-loader-na-chistom-css/feed/ 0
Стиль для внешних ссылок http://starhack.ru/stil-dlya-vneshnix-ssylok/ http://starhack.ru/stil-dlya-vneshnix-ssylok/#respond Mon, 11 Jan 2021 13:10:11 +0000 http://starhack.ru/?p=1270 Читать далее Стиль для внешних ссылок]]> Ссылки, ведущие на другие сайты, со страниц вашего сайта (внешние ссылки) можно стилизовать несколькими способами. Например, добавляя к таким ссылкам отдельный CSS-класс.

Но можно обойтись исключительно средствами CSS! Для этого используем селектор атрибута.

/* <a href="//google.com">External link 1</a> */
/* <a href="https://google.com">External link 2</a> */
/* <a href="http://some-site.example">External link 3</a> */

a[href*="//"]:not([href*="your-site-address.name"]) {
    /* any styles you want */
}

Такой селектор выберет все ссылки, в атрибуте href которых есть двойной слеш (//), за исключением страниц вашего сайта. Если же для внутренней навигации вы используете внутренние ссылки без указания протокола, то можно изменить селектор вот так:

a[href^="http"], a[href^="//"] {
    /* any styles you want */
}

See the Pen mdrGxMx by Sergey Kirichenko (@oknechirik) on CodePen.

]]>
http://starhack.ru/stil-dlya-vneshnix-ssylok/feed/ 0
Полезные функции в CSS, о которых хорошо бы знать. Часть первая. CSS-функция attr. http://starhack.ru/poleznye-funkcii-v-css-o-kotoryx-xorosho-by-znat/ http://starhack.ru/poleznye-funkcii-v-css-o-kotoryx-xorosho-by-znat/#comments Tue, 22 Dec 2020 18:45:36 +0000 http://starhack.ru/?p=1250 Читать далее Полезные функции в CSS, о которых хорошо бы знать. Часть первая. CSS-функция attr.]]> В CSS, как это ни странно, есть свои функции. Например, функция для задания цвета rgb. Но сейчас не о ней.

CSS-функция attr

Функция attr() возвращает значение атрибута на выбранном элементе. Это позволяет нам получить значение атрибута и использовать для, например, свойства content выбранного элемента.

Вот пример.

<a href="http://example.com">Example</a>

a:after {
    content: ' (' attr(href) ')';
}

See the Pen abmLzea by Sergey Kirichenko (@oknechirik) on CodePen.

]]>
http://starhack.ru/poleznye-funkcii-v-css-o-kotoryx-xorosho-by-znat/feed/ 1
GAP/GRID-GAP и Flexbox http://starhack.ru/gap-grid-gap-i-flexbox/ http://starhack.ru/gap-grid-gap-i-flexbox/#respond Thu, 06 Jun 2019 08:03:30 +0000 http://starhack.ru/?p=1203 Если вы вдруг не знали, то знайте: Firefox применяет свойство grid-gap для flex-контейнеров.

Для меня это оказалось неожиданным именно из-за именования. Grid в названии вроде как указывает на применимость для grid-контейнеров. Вероятно, поэтому это свойство и переименовали в просто gap.

Свойство экспериментальное и сейчас поддерживается только в Firefox.

]]>
http://starhack.ru/gap-grid-gap-i-flexbox/feed/ 0
Создание значков с помощью Image Asset Studio http://starhack.ru/sozdanie-znachkov-s-pomoshhyu-image-asset-studio/ http://starhack.ru/sozdanie-znachkov-s-pomoshhyu-image-asset-studio/#respond Wed, 27 Mar 2019 15:40:21 +0000 http://starhack.ru/?p=1190 Просто полезная ссылка, как создать набор адаптивных иконок для Android приложения

]]>
http://starhack.ru/sozdanie-znachkov-s-pomoshhyu-image-asset-studio/feed/ 0
Обои Windows 10 для экрана блокировки http://starhack.ru/oboi-windows-10-dlya-ekrana-blokirovki/ http://starhack.ru/oboi-windows-10-dlya-ekrana-blokirovki/#respond Sun, 07 Oct 2018 21:00:41 +0000 http://starhack.ru/?p=1178 Читать далее Обои Windows 10 для экрана блокировки]]> Что меня лично очень радует на Windows 10, так это красивые фотографии на экране блокировки. Очень они мне нравятся. Хотелось все время их скачать, чтобы, например, поделиться с кем радостью.
�? вот, где они спрятаны:

    1. Найдите папку C:\Users\[UserName]\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets (для этого у вас должна быть включена видимость скрытых папок и файлов)
    2. Там вы найдете какое-то количество файлов с бессмысленными именами и без расширений.
    3. Скопируйте в удобное для вас место самые крупные из самых последних
    4. Переименуйте скопированные файлы во что-то осмысленное с добавлением расширения .jpg
    5. �? вуаяля: красивые фотографии с замечательными видами со всех уголков Земли в вашем распоряжении. При соблюдении прав корпорации MS, конечно.

    Всем добра!

]]>
http://starhack.ru/oboi-windows-10-dlya-ekrana-blokirovki/feed/ 0
No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android http://starhack.ru/no-toolchains-found-in-the-ndk-toolchains-folder-for-abi-with-prefix-mips64el-linux-android/ http://starhack.ru/no-toolchains-found-in-the-ndk-toolchains-folder-for-abi-with-prefix-mips64el-linux-android/#comments Sun, 30 Sep 2018 21:00:44 +0000 http://starhack.ru/?p=1169 Could not resolve all dependencies for configuration ':app:_debugApk'. > A problem occurred configuring project ':react-native-version-number'. > No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android Ключевое … Читать далее No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android]]> Проект на React Native (RN). Прилетело обновление NDK, ничтоже сумняшеся обновился. Запустил сборку yarn android. �?… тыква :(

A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugApk'.
   > A problem occurred configuring project ':react-native-version-number'.
      > No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

Ключевое здесь
No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
Дело в том, что mips64el-linux-android теперь deprecated.
Чтобы решить проблему, надо скачать одну из предыдущих версий NDK. Распаковать скачанный архив и заместить содержимое директории C:\Users\UserName\AppData\Local\Android\Sdk\ndk-bundle (вероятное место расположения SDK на Windows компьютерах).

]]>
http://starhack.ru/no-toolchains-found-in-the-ndk-toolchains-folder-for-abi-with-prefix-mips64el-linux-android/feed/ 1
Обрезка текста в React-Native http://starhack.ru/obrezka-teksta-v-react-native/ http://starhack.ru/obrezka-teksta-v-react-native/#respond Sun, 23 Sep 2018 21:00:02 +0000 http://starhack.ru/?p=1162 Читать далее Обрезка текста в React-Native]]> В React-Native, как и в CSS, есть возможность обрезать текст, если он не помещается. �? даже сделать это более гибко. Если в CSS пока есть только возможность добавить три точки в конце строки (через свойство text-overflow), то в React-Native вы можете указать, где эти три точки будут: в начале строки, в конце или в середине! Но есть небольшое замечание: узел Text должен быть непосредственным потомком узла View. Вот пример кода:

Вот так не работает
<View>
  <Touchable>
    <Text numberOfLines={1}
             ellipsizeMode="middle"
    >{attachment.name}</Text>
  </Touchable>
</View>
А вот так все хорошо!
<View>
  <Touchable>
    <View>
      <Text numberOfLines={1} //указываете допустимое количество строк для текста
               ellipsizeMode="middle" //место, где будет разрыв текста в три точки (возможно указать 'head', 'middle', 'tail', 'clip'. 'clip' только для iOS)
      >{attachment.name}</Text>
    </View>
  </Touchable>
</View>
]]>
http://starhack.ru/obrezka-teksta-v-react-native/feed/ 0
http://starhack.ru/codepen-io-v-ie11/ http://starhack.ru/codepen-io-v-ie11/#respond Tue, 18 Sep 2018 10:02:09 +0000 http://starhack.ru/?p=1158
Codepen перестал поддерживать �?Е11. Очень жаль, было удобно быстро что-нибудь перепроверить по верстке.

]]>
http://starhack.ru/codepen-io-v-ie11/feed/ 0