Ez a projekt egy HTML és CSS optimalizáló eszközt tartalmaz, amely a HTML fájlban használt osztályok alapján kiszűri a CSS-ből a felesleges szabályokat, majd eltávolítja a média lekérdezéseket, és végül kisebb, könnyen kezelhető darabokra bontja a CSS fájlt.
-
extract_used_classes:- Feladata: A megadott HTML tartalomból kigyűjti az összes használt osztály nevét.
- Működése:
- A BeautifulSoup segítségével végigmegy minden olyan HTML elemen, amelyeknek van
classattribútuma. - Ezekből egy halmazt készít, hogy az osztálynevek egyediek legyenek.
- A BeautifulSoup segítségével végigmegy minden olyan HTML elemen, amelyeknek van
-
extract_css_rules:- Feladata: A CSS szabályokat lebontja stílusokra és azokat csoportosítja.
- Működése:
- A CSS tartalmat
}karakter mentén darabolja, majd a{karakter alapján szétválasztja a szelektorokat és stílusokat. - Ezeket párosítva tárolja egy szótárban.
- A CSS tartalmat
-
filter_and_optimize_css:- Feladata: Csak azokat a CSS szabályokat tartja meg, amelyek a HTML-ben ténylegesen használt osztályokhoz tartoznak.
- Működése:
- Végigmegy minden stílus-szelektor páron, és kiszűri azokat, amelyek nem tartalmaznak olyan osztályokat, amelyek a HTML-ben szerepelnek.
- Az eredményeket optimalizált szabályok formájában adja vissza.
-
remove_media_queries:- Feladata: Eltávolítja az összes
@mediaszabályt a CSS-ből. - Működése: A
@mediakulcsszót tartalmazó szabályokat kizárja a végleges CSS-ből.
- Feladata: Eltávolítja az összes
-
split_into_chunks:- Feladata: A CSS szabályokat kisebb darabokra bontja (alapértelmezés szerint 200 soros darabokra).
- Működése: A szabályokat sorokra bontja, majd a megadott méretű darabokra osztja.
-
optimize_css:- Feladata: Az összes fenti lépést összefogja és végrehajtja.
- Működése:
- Kinyeri a HTML-ben használt osztályokat, majd kiszűri a releváns CSS szabályokat, eltávolítja a média lekérdezéseket, és darabokra bontja a szabályokat.
-
Töltsd be a HTML és CSS fájlokat az alábbi formátumban:
with open("index.html", "r", encoding="utf-8") as html_file: html_content = html_file.read() with open("index.css", "r", encoding="utf-8") as css_file: css_content = css_file.read()
-
Futtasd az optimalizálást:
chunks = optimize_css(html_content, css_content)
-
Mentés:
with open("rovid.css", "w", encoding="utf-8") as output_file: for chunk in chunks: output_file.write(chunk + "\n")
<!DOCTYPE html>
<html lang="hu">
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header"></div>
<p class="text bold"></p>
</body>
</html>.header { color: red; }
.text { font-size: 16px; }
.bold { font-weight: bold; }
.footer { color: blue; }
@media (max-width: 600px) {
.responsive { display: none; }
}.header { color: red; }
.text { font-size: 16px; }
.bold { font-weight: bold; }- Python 3.6+
- BeautifulSoup (
bs4csomag)
Ez a projekt szabadon felhasználható, módosítható és terjeszthető az MIT licenc feltételei mellett.