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
CSS vlastnost: aspect-ratio
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
- default (export default)
- standardní export (export)
Příklad
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).
Instalace NPM
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
Struktura souborů
node_modules
- v této složce naleznete veškeré balíčky, které byly nainstalovány
package.json
- JSON, který uchovává všechny informace o projektu a taktéž seznam všech nainstalovaných balíčků
{ “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” }}
Základní příkazy
npm init …
Pokud se chcete zbavit repetetivní, nudné práce a ušetřit si, tak spoustu času při vývoji Gulp je správnou volbou.
Pomocí Gulpu můžete optimalizovat obrázky, minifikovat soubory (css, js), spojovat soubory a mnoho dalšího.
Alternativy Gulpu jsou Webpack, Grunt a npm scripty.
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:
Co je to vlastně HTML DOM?
- zkratka DOM znamená (Document Object Model)
- je možné s ním manipulovat pomocí JavaScriptu
