V další verzi Chromu je opět několik novinek. Sepsal jsem krátky článek o těch, které mě nejvíce zaujaly.
Datum vydání verze Chrome 88: 19.ledna 2021
Podpora v prohlížečích: tuto vlastnost zatím podporuje bohužel jen Chrome právě od verze 88
Vlastnost aspect-ratio za Vás vyřeší poměr stran, stačí jen nastavit výšku nebo šířku. Následně nastavíte v jakém poměru má být div/obrázek/iframe. V mém případě mám nastavený poměr stran 1:1.
Příklad nastavení poměru stran 1:1
.content {
width: 25%;
text-align: center;
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
color: white;
padding: 2em;
aspect-ratio: 1 / 1;
}
Předností modulů je udržitelnost a čitelnost kódu.
Hlavní myšlenkou je import a export určitých částí kódu, tzn. že můžete kód rozsekat na několik částí, čímž se zvyšuje, již zmíněná přehlednost a udržitelnost.
2 typy exportu
HTML struktura
<button id=”btnShowMess”>Show message</button>
<script type="module" src="app.js"></script> <!-- attribut type nastavíme na modul, aby prohlížeč věděl, že pracujeme s moduly -->
mess.js
export function Message(mess) {
console.log(mess);
}
app.js
import {Message} from ‘./mess.js’; // import funkce z mess.js
const btn = document.getElementById(“btnShowMess”);
btn.onclick = () => {
Message(“Hello world”);
}
Výsledek v konzoli po kliknutí na tlačítko Show message:
Pro instalaci NPM je nutné nejprve nainstalovat Node.js (JS runtime postavený na Chrome V8 JavaScriptovém enginu).
npm install npm@latest -g - na macu a linuxu bude potřebova instalaci provést s administrátorským oprávněním (sudo) tedy:
sudo npm install npm@latest -g
{ “name”: “start-project”, “version”: “1.0.0”, “description”: “”, “main”: “”, “author”: “”, “license”: “ISC”, “devDependencies”: { “browser-sync”: “².26.13”, “gulp”: “⁴.0.2”, “gulp-autoprefixer”: “⁷.0.1”, “gulp-clean-css”: “⁴.3.0”, “gulp-concat”: “².6.1”, “gulp-sass”: “⁴.1.0”, “gulp-sourcemaps”: “³.0.0”, “gulp-stylelint”: “¹³.0.0”, “gulp-terser”: “².0.0”, “node-sass”: “⁴.14.1” }}
npm init …
Jmenuji se Matěj Kunc a momentálně se živím jako HTML/CSS kodér, v malém start-upu Rondo. Je to moje první full-time práce, za kterou jsem nesmírně vděčný.
Svůj studentský život jsem ukončil po střední škole. Během střední školy jsem pracoval pro několik firem. Stavěl jsem webové stránky na redakčním systému Wordpress( Elementor, Divi), ale zároveň jsem občas něco nakódil od základu.
Můj cíl je se stát FE developer, každý den se snažím nějakým způsobem vzdělávat a přiblížit se, tak této pozici. …
Tato vlastnost specifikuje, kde všude se uvnitř elementu bude vykreslovat obrázek nebo pozadí.
Výchozí hodnota je border-box.
Pro nastavení pozadí textu je v první řadě nutné nastavit background této vlastnosti. Přiřadíme zdroj obrázku, v mém případě url(“fire-bg.jpg”).
Dále deklarujeme background-clip s prefixem -webkit tedy -webkit-background-clip: text. Nestačí nám nastavit -webkit-background-clip na hodnotu text. Také musíme nastavit vlastnost color na transparent, jelikož barva textu přebíjí obrázek.
Výsledek bez vlastnosti color: transparent by vypadal takto:
HTML/CSS kodér s přesahem do Reactu