PrivateAlps.net - Offshore Cloud Services | VPS/RDP/VPN - Dedicated Servers - Webhosting - TOR Services - Auto Deploy
Frontend Development

.CSS Minify [Trick]

Submitted by donscream, , Thread ID: 11494

Thread Closed
19-10-2015, 05:29 PM
#1
Hi,

Im going to make a tutorial for web-language .css how to minify.
The reason i wanna do this is because we can make with this the .css read faster then normal.
There are just some simple steps todo when you know how to do this will it make it more fun to edit you're ow .css

___________________________________________________
Step 1

This is a example how the normal .css will look like.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #d0e4fe;
}

h1 {
  color: orange;
  text-align: center;
}

p {
  font-family: "Times New Roman";
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

Well u see that there allot of space is in it.
And you're website will read the spaces too.
So let's delete the spaces from this .css script so the website will read it faster.

Code:
body {
  background-color: #d0e4fe;
}

h1 {
  color: orange;
  text-align: center;
}

p {
  font-family: "Times New Roman";
  font-size: 20px;
}

So what we do is make this .css into this.

Code:
body{background-color:#d0e4fe;}
h1{color:orange;text-align:center;}
p{font-family:"Times New Roman";font-size:20px;}

You see there no spaces in this .css

By this step we have created the .css to read faster then when it reads all the white spaces.

Example: you have a .css file that is 1000 characters long.
There allot of white spaces that you're website reads before it is on the end of the script when you load the .css
Now delete all the white spaces and you can reduce the 1000 lines .css script to 500 because of removing the white spaces....

So instead of you're website reads 1000 lines it reads now just 500........ Uhm so this means you're website read less then it normal should be... so it will read faster

Okay let's go back to the example script.....
And after removing all the white spaces it will look like this.

Code:
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:#d0e4fe;}
h1{color:orange;text-align:center;}
p{font-family:"Times New Roman";font-size:20px;}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

So from 26 lines to 14 lines......

Less white spaces less to read and faster loading....

RE: .CSS Minify [Trick]

#2
nice idea, i have try something now
Isn't this signature cool ? <3

RE: .CSS Minify [Trick]

#3
Why on earth would you add CSS on the same page? Make an external stylesheet.
Please read the award requirements here before applying for them.
Rules and Regulations | Support Section | How to use Hide Tags
Don't message me to join a group, simply request to join one here.

RE: .CSS Minify [Trick]

#4
03-11-2015, 02:22 PM
Nasyr Wrote: Why on earth would you add CSS on the same page? Make an external stylesheet.

Much easy to use a separate file too imo

RE: .CSS Minify [Trick]

#5
03-11-2015, 02:22 PM
Nasyr Wrote: Why on earth would you add CSS on the same page? Make an external stylesheet.

Because google is a cunt and everything above the fold needs to be within the html file - everything else can be external.
Minifying your code gives you a better rate. For everyone who actually is coding much is using a plugin for sublime lol :D

Nice try op - but i am coding my css well formatted same for other languages. As soon as i am finished i am going to use said plugin and minify it.
Enjoy reformatting more then 3000 lines of css lmao

RE: .CSS Minify [Trick]

#6
Yeah Sublime has indeed a great plugin for this like Bar said.

For people that do not have these plugins you can use http://cssminifier.com/ super easy and fast.

Just make a mess and this minifer will clean up.

RE: .CSS Minify [Trick]

#7
Im going to make a tutorial for web-language .css how to minify.
The reason i wanna do this is because we can make with this the .css read faster then normal.
There are just some simple steps todo when you know how to do this will it make it more fun to edit you're ow .css

nice trick bro

RE: .CSS Minify [Trick]

#8
im already using additianl you can delete the breaks for saving bandwidth,
write everything in one line

RE: .CSS Minify [Trick]

OP
#9
07-12-2015, 07:42 AM
Sn3ak3r Wrote: Yeah Sublime has indeed a great plugin for this like Bar said.

For people that do not have these plugins you can use http://cssminifier.com/ super easy and fast.

Just make a mess and this minifer will clean up.

sure it's easy to use plugin but when u use xenforo like me... uhm well the website will break the rules.... XD
So u will end up liek a broken forum......

Best is just to spend some time and do it yourself.....
I rather take time for my project and know what's been done.

RE: .CSS Minify [Trick]

#10
I once calculated that when you go beyond 5 pages its advicable to be using a seperate CSS file.

Users browsing this thread: 1 Guest(s)