When it comes to enhancing stylesheets, you should firstly understand how the CSS stylesheet for a particular platform works. It will help you control the styles, the how and where you can add the styles. You will also need to regulate the aggregates you can create, and for this purpose you need to be aware of the way you can manipulate this feature.
Your styles, that you would be using, can belong to either Drupal core, styles added within the modules or styles added to the theme. Drupal essentially aggregates the stylesheets from the different groups thus giving you three CSS files. If a stylesheet is added to the theme's info file it will automatically be given the true tick. In case, you add stylesheets by using the drupaladdcss then the every_page flag is set to false. If you want to set it to true, then you should use the optional options array.
<?php
drupal_add_css(drupal_get_path('module', 'custom-module') . '/css/custom-module.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE));
?>
Preprocessing the CSS Files
Preprocessing your CSS to improve the performance of your website may seem like a great idea. But, if you go ahead with it too often, then you might hit past the 1MB limit with your CSS stylesheets. This is because of nesting divs as well as bad coding practices adopted by Drupal developers. Over nesting of selectors is one path that you should not be treading.
Here is an example of the same
body {
div.container {
div.content{
div.articles{
&> div.post {
div.title {
h1 {
a{
color: #333;
text-decoration: none;
}
}
}
div.content{
p {
font-size: 1rem;
}
ul {
li {
font-style: italic;
}
}
}
div.author {
a.display {
img {
max-width: 100%;
}
}
h4 {
a{
color: #369;
}
}
ul {
;I {
text-transform: uppercase;
}
}
}
}
}
}
}
}
Let's see how we can clean this up
a {
color: #369;
}
a {
color: #333;
text-decoration: none;
}
}
h4 {
a {
color: #369;
text-decoration: none;
}
}
p {
font-size: 1rem;
}
li {
font-style: italic;
}
author {
img {
max-width: 100%;
}
li {
text-transform: uppercase;
}
}
There is a huge reduction in the byte consumption due to this change that you make to the CSS stylesheet preprocessing, by just getting rid of all the special characters. The amount of time the browser takes to process your style is also substantially reduced with this slight change to the preprocessing and coding practice that you have been involved with.
Deepa is a passionate blogger associated with Semaphore Software. She loves sharing information regarding drupal web development tips & tricks. If you are looking for hire drupal developers then just get in touch with her.
|
|
| By Deepa Ranganathan On 09 Jul, 15 Viewed: 293 |
Angularjs animation is more than easy, even you don't have write a single line of code any kind of animation. In this demo I am going to show how you can animate the list of item coming from left, rotating and flying list items by just adding ngAnimation dependency and some copy and past of css and... By Ali Adravi On 21 Jul 2015 Viewed: 2,428
<center>![Customizations for Your Wordpresst][1]</center> Have you just started using Wordpress? If yes, then there are a few things that you may want to play around with. Customizing a Wordpress theme at beginner level actually means customizing your stylesheets to make the design look... By Deepa Ranganathan On 06 May 2015 Viewed: 411
Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two... By Ali Adravi On 18 Apr 2015 Viewed: 7,364
Ajax Rounded corners extender is used to give corner to any elements like panel and div etc. Most of the time you will need to give the padding to give some space between the border and content, same is used for margin to give some vertical and horizontal space between different controls, but if... By Alicia Gonzalez On 15 Jun 2013 Viewed: 840
To show blurred, faded or washed-out image by using CSS and clear effect on mouse over on the image we need to use simply two CSS opacity and filter: alpha See following image, by default all will be faded on page load and once user will mouse over on any image that will look like the third... By Jason Olivera On 06 Apr 2013 Viewed: 1,881