Partage
  • Partager sur Facebook
  • Partager sur Twitter

Optimisation

Réduire la taille de mon .css

Sujet résolu
PapierPeintNoirFoncéAvecDesNuancesDeGris
12 avril 2018 à 12:37:10

Bien la bonne journée à vous gentes personnes !

Mes problèmes de code étant résolus je recrée un sujet dans le but cette fois de réduire la taille de mon css ... 2404 lignes c'est un peu beaucoup.

Je m'y essayerais bien tous seul en me servent du ctrl+shift+i sur google et en jetant un œil aux dépendances, mais j'ai peur de faire de grosses bêtises et préfère demander à des professionnels comme vous comment m'y prendre ;)

Voici donc mon programme :

<!DOCTYPE HTML>
<html>
	<head>
		<title>Projet ISN-Hervier-Chatal-Silinski</title>
		<link rel="stylesheet" href="assets/css/main.css" />
	</head>
	<body>
			<section id="header">
				<header>
					<h1>Projet ISN</h1>
					<p>Hervier-Chatal-Silinski</p>
				</header>
			</section>

			<section id="video">
				<video width="64%" height="64%" controls>
					<source src="Trailer.mp4" type="video/mp4">
				</video>
			</section>

			<article id="first" class="container box style1 right">
				<a href="#" class="image fit">
					<img src="images/solo.jpg" alt="" /></a>
				<div class="inner">
					<header>
						<h2>Une aventure<br />
						trépidante</h2>
					</header>
					<p>Le roi vous a chargé d'enquêter sur d'étranges disparitions, mais la vérité est en réalité bien sombre et le chemin pour y parvenir est parsemé de maints pièges, monstres et énigmes. Vous montrerez-vous à la hauteur ?</p>
				</div>
			</article>

			<article class="container box style1 left">
				<a href="#" class="image fit">
					<img src="images/labyrinthe.jpg" alt="" /></a>
				<div class="inner">
					<header>
						<h2>Un labyrinthe<br />
						inexpugniable</h2>
					</header>
					<p>Vous et votre ami êtes prisonniers dans les méandres du labyrinthe et un seul en sortira vivant. Saurez-vous trouver l'équilibre entre prudence et rapidité ?</p>
				</div>
			</article>

			<article class="container box style1 right">
				<a href="#" class="image fit">
					<img src="images/survie.jpg"  /></a>
				<div class="inner">
					<header>
						<h2>Et des hordes<br />
						de monstres</h2>
					</header>
					<p>En pénétrant dans les ruines vous avez réveillé ses occupants ... Combien de temps leur survivrez-vous ?</p>
				</div>
			</article>

			<article class="container box style2">
				<header>
					<h2>Un léger avant-goût ?</h2>
					<p>Des visuels rétro dignent des jeux de votre enfance<br />
					Un gameplay riche et diversifié</p>
				</header>
				<div class="inner gallery">
					<div class="row 0%">
						<div class="3u 12u(mobile)"><a href="images/screens/1.png" class="image fit"><img src="images/miniature/1.png" alt="" title="1" /></a></div>
						<div class="3u 12u(mobile)"><a href="images/screens/2.png" class="image fit"><img src="images/miniature/2.png" alt="" title="2" /></a></div>
						<div class="3u 12u(mobile)"><a href="images/screens/3.png" class="image fit"><img src="images/miniature/3.png" alt="" title="3" /></a></div>
						<div class="3u 12u(mobile)"><a href="images/screens/4.png" class="image fit"><img src="images/miniature/4.png" alt="" title="4" /></a></div>
					</div>
					<div class="row 0%">
						<div class="3u 12u(mobile)"><a href="images/screens/5.png" class="image fit"><img src="images/miniature/5.png" alt="" title="5" /></a></div>
						<div class="3u 12u(mobile)"><a href="images/screens/6.png" class="image fit"><img src="images/miniature/6.png" alt="" title="6" /></a></div>
						<div class="3u 12u(mobile)"><a href="images/screens/7.png" class="image fit"><img src="images/miniature/7.png" alt="" title="7" /></a></div>
						<div class="3u 12u(mobile)"><a href="images/screens/8.png" class="image fit"><img src="images/miniature/8.png" alt="" title="8" /></a></div>
					</div>
				</div>
			</article>

		<section id="footer">
			<div class="end">
				<ul class="menu">
					<li>Projet ISN</li>
					<li>Hervier-Chatal-Silinski</li>
				</ul>
			</div>
		</section>

			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/jquery.poptrox.min.js"></script>
			<script src="assets/js/skel.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>

Ainsi que le fameux css, bien trop long ahah !

EDIT : "du vide"

Je tiens à ajouter qu'avec le pack pour ce "modèle" de site sont fournis d'autres fichiers comme "ie8.css", "font.css", différentes polices d'écritures, et des fichier .js et .scss (je n'ai aucune idée de ce que sont ces fichiers :euh:).

Si vous souhaiter prendre connaissances de ces différents fichier faut cliquer en haut à droite : https://html5up.net/overflow

Merci à tous ceux qui se creuseront les méninges 5 petites minutes pour ôter tout ce superflu ! ^^



-
Edité par PapierPeintNoirFoncéAvecDesNuancesDeGris 20 avril 2018 à 11:24:26

  • Partager sur Facebook
  • Partager sur Twitter
Seul le sage sait combien il sait peu.
PapierPeintNoirFoncéAvecDesNuancesDeGris
13 avril 2018 à 15:14:06

Ca fait fuir, les css de 2404 lignes dites :lol:
  • Partager sur Facebook
  • Partager sur Twitter
Seul le sage sait combien il sait peu.
Mewen_bzh
  • HTML / CSS
13 avril 2018 à 15:27:40

Salut,

Désolé je n'avais pas vu ton message. ;)

Tu as pas mal de soucis dans ton code.

Premièrement, c'est dommage de prendre un template et de ne pas l'utiliser.

Par exemple, les fichiers SCSS. Ils fonctionnent comme les fichiers SASS ou LESS, c'est à dire qu'il faut les compiler pour générer automatiquement le code CSS. Ici tout ce que tu as mis dans le fichier CSS sera donc écrasé dès la prochaine compilation.

Tu dis aussi ne pas utiliser les fichiers pour ie ou les fonts, tu as regardé le contenu de ces fichiers pour savoir qu'ils font, où ils sont appelés, etc ?

Au final tu as quelque chose de très lourd dont tu n'utilises au mieux que quelques lignes. C'est comme si tu prenais une batterie complète de missiles nucléaires pour écraser un bébé moustique. 

Il n'y a pas énormément de solution ici. La meilleure étant selon moi de repartir de rien, sans tout cela et de faire toi même ce dont tu as besoin.

Autre possibilité : repartir avec ce thème mais en prenant le temps de bien regarder chaque fichier et chaque dossier et te servir de tout ce dont tu as besoin pour exploiter cet outil au mieux de ses capacités.

  • Partager sur Facebook
  • Partager sur Twitter
Je ne réponds pas aux messages privés.
philiga
  • HTML / CSS
13 avril 2018 à 15:36:15

PapierPeintNoirFoncéAvecDesNuancesDeGris a écrit:

Ca fait fuir, les css de 2404 lignes dites :lol:

Mais bien sûr ! 
Ce que tu nous demandes, c'est de te déconstruire une cathédrale pierre par pierre sans rien déstabiliser en ne laissant que le pan de mur contre lequel tu as étayé la cabane que tu as construis en appui contre elle.
N'y vois rien de péjoratif, mais comme je te le disais dans ton message précédent (ce n'était pas de l'ironie): libère-toi en jetant tout ce css à la poubelle! 
Tu as 1000 fois meilleurs temps avec une base html aussi simple de construire ton css toi-même simplement.
Il pourrait ne guère dépasser 30 lignes au lieu des 2400 actuelles inextricables.
Et en partant par exemple sur une grille globale simple avec display:grid; tu devrais assez aisément pouvoir le rendre adaptable aux mobiles. 
En voici des exemples:

-
Edité par philiga 13 avril 2018 à 15:38:51

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
PapierPeintNoirFoncéAvecDesNuancesDeGris
13 avril 2018 à 15:45:16

Je vais essayer, mais autant j'ai quelques bases en html autant pour ce qui est des fichiers css disons que je sais mettre le fond en noir et afficher une image :/

-
Edité par PapierPeintNoirFoncéAvecDesNuancesDeGris 13 avril 2018 à 15:45:34

  • Partager sur Facebook
  • Partager sur Twitter
Seul le sage sait combien il sait peu.
philiga
  • HTML / CSS
PapierPeintNoirFoncéAvecDesNuancesDeGris
13 avril 2018 à 19:16:12

Ah merci c'est très utile :)
  • Partager sur Facebook
  • Partager sur Twitter
Seul le sage sait combien il sait peu.
PapierPeintNoirFoncéAvecDesNuancesDeGris
20 avril 2018 à 1:07:35

Et voici ! On est passé de 2400 à 400 ! :magicien:

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");
@import url("font-awesome.min.css");

/*
	Fichier .css pour le projet d'ISN du groupe Hervier,Chatal,Silinski
*/

/* Reset */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

/* Box Model */

	*, *:before, *:after {
		box-sizing: border-box;
	}

/* Containers */

	.container {
		margin-left: auto;
		margin-right: auto;
	}

	.container {
			width: 960px;
		}

/* Grid */

	.row > * {
		float: left;
		box-sizing: border-box;
	}

	.row:after, .row:before {
		content: '';
		display: block;
		clear: both;
		height: 0;
	}

	.row.\30 \25 > * {
		padding: 0px 0 0 0px;
	}

	.row.\30 \25 {
		margin: 0px 0 -1px 0px;
	}

	.row.uniform.\30 \25 > * {
		padding: 0px 0 0 0px;
	}

	.\33 u, .\33 u\24 {
		width: 25%;
		clear: none;
		margin-left: 0;
	}

/* Basic */

	body {
		background-color: #183026;
		background-image: url("images/overlay.png"), url("../../images/bg.jpg");
		background-repeat: repeat, no-repeat;
		background-size: auto, cover;
		background-position: top left, center 0;
		background-attachment: fixed, fixed;
		font-family: 'Source Sans Pro', sans-serif;
		line-height: 1.75em;
		font-weight: 300;
		letter-spacing: 1px;
		color: #3a3939;
		text-shadow: 0 0 0.5px rgba(58, 57, 57, 0.25);
		-webkit-text-stroke: 0.25px;
	}

	h1, h2, h3, h4, h5, h6 {
		text-transform: uppercase;
		line-height: 1.75em;
	}

	h2 {
		font-size: 1.25em;
		letter-spacing: 8px;
	}

	a {
		transition: border-color 0.35s ease-in-out, color 0.35s ease-in-out;
		color: #35b88f;
		text-shadow: 0 0 0.5px rgba(53, 184, 143, 0.25);
		text-decoration: none;
		border-bottom: dotted 1px rgba(53, 184, 143, 0.5);
	}

	header {
		margin-bottom: 1em;
	}

		header p {
			display: block;
			margin: 0.5em 0 0 0;
		}

/* Sections/Article */

	section > :last-child,
	article > :last-child,
	section:last-child,
	article:last-child {
		margin-bottom: 0;
	}

/* Image */

	.image {
		display: inline-block;
		border: 0;
	}

		.image img {
			display: block;
			width: 100%;
		}

/* List */

	ul.menu {
		cursor: default;
	}

		ul.menu li {
			display: inline-block;
			line-height: 1em;
			padding: 0 0 0 0.5em;
			margin: 0 0 0 0.5em;
		}

			ul.menu li:first-child {
				border-left: 0;
				padding-left: 0;
				margin-left: 0;
			}

/* Box */

	.box {
		position: relative;
		margin-top: 9em;
		margin-bottom: 0;
	}

		.box:after {
			content: '';
			display: block;
			position: absolute;
			top: -9em;
			left: 50%;
			height: 9em;
			border-left: solid 1px #fff;
		}

		.box:before {
			content: '';
			display: block;
			width: 90px;
			height: 66px;
			position: absolute;
			left: 50%;
			top: -4.5em;
			margin-left: -45px;
			margin-top: -33px;
			background: url("images/Arrow.svg") no-repeat;
		}

		.box :last-child {
			margin-bottom: 0;
		}

		.box.style1 {
			background: #fff;
			padding: 3em;
		}

			.box.style1 .image {
				display: block;
				position: absolute;
				top: 0;
				width: 50%;
				height: 100%;
				background: #152E33;
				overflow: hidden;
			}

				.box.style1 .image img {
					position: absolute;
					top: 0;
					height: 100%;
					width: auto;
				}

			.box.style1.right .image {
				left: 0;
			}

				.box.style1.right .image img {
					right: 0;
				}

			.box.style1.right .inner {
				margin-left: 50%;
				padding-left: 3em;
			}

			.box.style1.left .image {
				right: 0;
			}

				.box.style1.left .image img {
					left: 0;
				}

			.box.style1.left .inner {
				margin-right: 50%;
				padding-right: 3em;
			}

		.box.style2 {
			text-align: center;
		}

			.box.style2 header {
				display: inline-block;
				background: #fff;
				padding: 2em 3em 2em 3em;
				margin: 0;
			}

				.box.style2 header p {
					padding: 0;
				}

			.box.style2 .inner {
				position: relative;
				padding: 40px 0 0px 0;
			}

				.box.style2 .inner:after {
					content: '';
					display: block;
					position: absolute;
					top: 0;
					left: 50%;
					height: 100%;
					border-left: solid 1px #fff;
				}

				.box.style2 .inner .row {
					position: relative;
				}

					.box.style2 .inner .row:before {
						content: '';
						display: block;
						position: absolute;
						top: 50%;
						left: 20px;
						width: calc(100% - 40px);
						border-bottom: solid 1px #fff;
					}

				.box.style2 .inner .image {
					position: relative;
					z-index: 1;
					padding: 20px;
				}

/* Header */

	#header {
		position: relative;
		color: #fff;
		text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
		text-align: center;
		margin: 0;
		padding: 14em 0 14em 0;
		cursor: default;
	}

		#header header {
			display: inline-block;
			padding: 0 0 4.5em 0;
		}

			#header header h1 {
				font-weight: 600;
				font-size: 2em;
				letter-spacing: 10px;
			}

			#header header p {
				border-top: solid 1px rgba(255, 255, 255, 0.5);
				color: rgba(255, 255, 255, 0.75);
				text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.1875);
				font-size: 1em;
				text-transform: uppercase;
				letter-spacing: 3px;
				padding: 0;
				margin-top: 0.35em;
			}

				#header header p:before {
					content: '';
					display: block;
					border-top: solid 1px rgba(255, 255, 255, 0.5);
					margin: 4px 0 0.8em 0;
				}

/* video */

	#video {
		position: relative;
		color: #fff;
		text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
		text-align: center;
		padding: 0em 0 0em 0;
		margin: 0;
		background: #000 url("images/BannerVideo.svg") bottom center no-repeat;
		background-size: 194% auto
	}

		#video video{
  		vertical-align:top;
		}

/* Footer */

	#footer {
		position: relative;
		color: #fff;
		text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
		text-align: center;
		margin: 4.5em 0 0 0;
	}

		#footer:after {
			content: '';
			display: block;
			position: absolute;
			top: -4.5em;
			left: 50%;
			height: 4.5em;
			border-left: solid 1px #fff;
		}

		#footer .end {
			margin: 0 0 9em 0;
			font-size: 0.8em;
		}

/* Poptrox */

	.poptrox-popup {
		box-sizing: content-box;
		background: #fff;
		padding-bottom: 3em;
	}

		.poptrox-popup .caption {
			position: absolute;
			bottom: 0;
			left: 0;
			background: #fff;
			width: 100%;
			height: 3em;
			line-height: 3em;
			text-align: center;
			cursor: default;
			z-index: 1;
		}

/* Wide */

	@media screen and (max-width: 1680px) {

		/* Basic */

			body, input, textarea, select {
				font-size: 16pt;
			}

	}



-
Edité par PapierPeintNoirFoncéAvecDesNuancesDeGris 20 avril 2018 à 12:42:22

  • Partager sur Facebook
  • Partager sur Twitter
Seul le sage sait combien il sait peu.
philiga
  • HTML / CSS
20 avril 2018 à 8:24:48

Bravo ! On commence à respirer  !

Il traine un morceau de media query qui ne semble pas avoir beaucoup de sens: la valeur de .container n'est pas définie ailleurs.

Et que se passe-t-il si

@media screenand (min-width: 1681px) { ?

Ce code est inutilement dédoublé en outre en début (lignes 28-34) et fin de code. 

Il faut toujours mettre les media queries en fin de code puisqu'elles surchargent le code de base.

Bonne continuation !

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
Lamecarlate
  • HTML / CSS
20 avril 2018 à 8:28:55

Bonjour,

> Il faut toujours mettre les media queries en fin de code puisqu'elles surchargent le code de base.

oui et non.

On peut tout à fait créer de multiples petites occurrences de @media, pour surcharger ce qui les précède immédiatement. C'est souvent plus facile de comprendre : "A ressemble à ça, mais sur mobile, A ressemble à ci", plutôt que "A ressemble à ça, et B à ça, et C et D, mais sur mobile, alors, on a A qui change, et B, et C, et D, etc".

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

philiga
  • HTML / CSS
20 avril 2018 à 8:48:26

@Lamecarlate: M'oui... on peut, à condition d'être bien structuré et très rigoureux globalement pour être sur qu'on ne va pas redéfinir une 3ème fois plus loin le même élément après les media queries...

@PapierPeintNoirFoncéAvecDesNuancesDeGris: Une suggestion: peut-être pourrais-tu éditer ton 1er message pour supprimer les 2400 lignes de css et alléger ainsi ce post...

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
PapierPeintNoirFoncéAvecDesNuancesDeGris
20 avril 2018 à 11:43:22

Bonjour, merci pour vos réponses !

J'ai mis à jour le code dans mon message précédent j'espère :)

Quant au .container ligne 392 il est nécessaire, les cases sont étirées et on voit apparaitre un fond à coté des images (d'ailleurs cela se produit aussi lorsque l'on dézoom mais tant pis):

  • Partager sur Facebook
  • Partager sur Twitter
Seul le sage sait combien il sait peu.
philiga
  • HTML / CSS
20 avril 2018 à 12:32:15

apierPeintNoirFoncéAvecDesNuancesDeGris a écrit:

Quant au .container ligne 392 il est nécessaire


Ligne 392, tu as ton media query qui oublie les écrans supérieurs à 1680px et ne définit aucunement .container

Pour le reste, si tu parles de la fine ligne blanche, elle est créée par le 

border-left: solid 1px #fff;

sur .box:after

  • Partager sur Facebook
  • Partager sur Twitter
"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
PapierPeintNoirFoncéAvecDesNuancesDeGris
20 avril 2018 à 12:39:38

Ah j'ai compris ce que tu voulais dire ! Voila j'ai actualiser le code au dessus :)

-
Edité par PapierPeintNoirFoncéAvecDesNuancesDeGris 20 avril 2018 à 12:42:02

  • Partager sur Facebook
  • Partager sur Twitter
Seul le sage sait combien il sait peu.