Speed ​​up Website Loading by Maximizing Use of CSS

CSS is one of the important component regulators that must be present in an HTML or XHTML based blog /website, if Html functions as a caller then CSS is the constituent of its layout display.

All elements in the blog /website are determined by CSS in terms of color, background, position, size, font type etc. You could say both (Html + CSS) have linkages with each other.

If only Html would not be enough to display a web page, CSS is needed to improve the display of the Html. Conversely, if only use CSS without (Html as a caller) a page cannot be displayed.

Reasons Why Should Leave Jquery

Another case with Jquery, is a javascript library that contains a collection of various 'ready to use' functions to facilitate writing JavaScript code.

Of course Jquery is very useful but when compared to User Experience (UX) from a web then it would be nice if you had to leave Jquery because it had a bad effect on UX and SEO, in terms of UX Jquery slowing down the blog /website loading and in terms of SEO inhibiting the rendering process by the enggine search robot.

Although there are ways to make Jquery not inhibit SEO but sometimes this makes Jquery not work entirely on a web page and has a platform on UX from the web. No more Jquery!

CSS Equivalent Jquery

How do you make a cool ( function/effect ) look without Jquery?

After the release of CSS3 we can say CSS is almost equivalent to Jquery to display effects Show Hide, Pop Up, Smooth Scroll etc.

Many do not yet know that CSS has exceeded the expectas from those that originally only set layouts, background and so on, until now it has become a versatile component.

If handled properly with the help of HTML as a caller, CSS can create various functions and special effects to maximize the appearance of blog/website. Believe it or not, the display and some functions of this web blog are only built with CSS.

Maximize the use of CSS

CSS Compress

First reduce the size of CSS on your blog / websie by uniting everything in one line like the bottom example :

div {
  display: table;
  position: relative;
  padding: 20px 0;
}
h1 {
  display: block;
  margin-bottom: 20px;
  font-size: 25px;
}

Join all CSS artibut into one line :

div {display: table;position: relative;padding: 20px 0}
h1 {display: block;margin-bottom: 20px;font-size: 25px}

If you are already expert or are adept at using CSS you can combine all the code in one line as below :

div {display: table;position: relative;padding: 20px 0} h1 {display: block;margin-bottom: 20px;font-size: 25px}

Use CSS Selector

This second part is the key to creating special functions that are equivalent to Javascript using only CSS. In the article W3Schools.com there are around 55 CSS Selector, but what will be explained here are only a few important Selectors that are rarely used but have an important role in CSS :

div < p

Serves to select all elements <p> which is only a direct derivative of <div>. Different from writing div p, writing like this selects all elements <p> contained in <div> without perduli whether it is a direct derivative or not.

div + p

Used to select elements <p> which is placed right after the code <div>, will not work if between <div> and <p> there is another Html code, examples of placements that qualify are as follows :

<div></div>
<p>Fill_text_page</p> <!-- The element <p> is just below <div> -->

div + p It won't work if the writing is like this :

<div></div>
<h2>Example_Heading</h2>
<p>Fill_text_page</p>

Instead use div ~ p for the above case.

[attribute=value]

Just select elements with predetermined attributes, for example We write the CSS code and html below :

<p>Fill_text_page</p>
<p style='display:block'>The CSS code above will only work on this line which is given the style attribute ='display:block'</p>
  

:checked

This code works for Checkbox or Radio type inputs, where if the input is clicked or selected then the CSS code will function. For examples will be written in separate articles.

:focus

Usually used for input type textbox or textarea with the same function when input is click ( the user writes something in input ) then the CSS code is active. the example will also follow a separate article.

:target

This code is shown for targeted links. example jagodesan.com/#header, meaning that if the link is as sweet as (with the suffix #header and so on) in click eat CSS code will be active.

:first-of-type

Aimed at the first derived element of the same type, for example :

<div>

  <p>The above CSS will only function in this section which is the first derived element of its kind, if the CSS code is changed to p:last-of-type then the CSS code is only active on 
 third paragraph or last element.</p>

  <p>Example of the second paragraph</p>

  <p>Example of the third paragraph</p>

</div>

p:first-of-type {background: #ea6d23}

With the capital of several selectors on top we will make various tutorials making cool web functions only with CSS. In the next article we will write a tutorial on using the CSS Selector to produce cool functions or effects with a more detailed explanation.