I want to create a PHP-CSS approach for my web applications. So I don't need to make any external CSS file, nor internal CSS, neither the inline styles. This approach will work as:
... html code ...
<?php
_c( '
header .nav {
background: yellow;
}
header .nav a {
text-decoration: none;
}
');
?>
... more html code and other php-css chunks ...
The function _c() will keep collecting all php-css chunks from entire application on the go, and finally, write all these chunks in a CSS file, compress or minimize and include using <link .. tag at the end.
This way, I won't need to even see the face of .css file. All my php-css chunks will be available on their related pages. So I won't need to keep a bunch of css files open and edit them.
If I use this approach for a huge application, what could be side effects on usability, performance, memory consumption, speed of app etc?
Related
I have created my own custom navbar. I have kept is separate in a file called main-menu.php
I call it into the header using:
<?php
include "main-menu.php";
?>
The main menu is made up as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav>
nav contents...
</nav>
<script>
jQuery Contents
</script>
<style>
CSS Styling
</style>
The problem I am experiencing is that although this is a seperate file, calling into the header... the CSS i have added and the scripts/links called at the top of the page effect the layout/display on all pages of contents below the header.
for example, I am designing an e-commerce store and the description has changed its layout, as a result of the main-menu.php it has become crammed and text which should be bold are no longer bold,.
Is there anything that can be done to prevent the css in main-menu.php from effecting the rest of the page?
Your issues stem from either lack of understanding or misunderstanding of how both CSS and PHP includes work.
The problem I am experiencing is that although this is a seperate
file, calling into the header...
When you import it, though, it is no longer a separate file. The source might be a separate file, but the include function pulls the imported code in, and the interpreters (both PHP and the browser) effectively see them as a single file. Since the final HTML/CSS/JS code is output into a single file, it follows all single file rules.
the CSS i have added and the
scripts/links called at the top of the page effect the layout/display
on all pages of contents below the header.
Yep, that's what happens when you add CSS to a page. This is part of the cascading part of Cascading Style Sheets (CSS).
The ideal way of addressing this is to better understand how the cascade works, but for now, we'll just address the problem in one of the easier ways and you can go from there as you learn.
Odds are good you have something like this in your styles:
a {
font-weight: bold;
}
That's going to make all of your links bold. All. Of. Them. This is because the browser is only matching a tags.
So, to make all of your <nav> links bold, you would do this:
nav a {
font-weight: bold;
}
If you have more than one <nav> element on your page, you can add classes and/or identifiers to them in order to tell them apart. The recommended way is to use classes for CSS, but when used sparingly and mindfully, I find IDs to be particularly helpful.
So, you might do something like this (IDs):
#header-nav a {
font-weight: bold;
}
Or this (classes):
nav.header a {
font-weight: bold;
}
What all of these do is tell the browser to only style links that are within <nav> elements (or, more specifically, nav elements classed header or the element named "header-nav").
What About The Bootstrap Styles I Don't Want?
This is where Bootstrap's class-happy nature works in your favor. Just don't use Bootstrap's classes, and you won't get most of its styles.
From there, you just weed out the styles still applying to your element, and override them. This can be a little hairy with these libraries, but such is the nature of the beast.
So, if you have a style like from Bootstrap:
.nav.header a {
font-weight: bold;
}
You would simply match the specificity, or get a little more specific if necessary:
.nav.header a {
font-weight: normal;
}
/* Or... */
.my-nav.nav.header a {
font-weight: normal;
}
You can find out what selectors Bootstrap is using by opening your browser's developer tools and inspecting the affected items. If you're unsure, you can use the developer tools to turn on and off applied styles, or add your own. Then, once you find the selections, you can match them in your stylesheet to override Bootstrap and set it back to the original value.
So How Does Vue Do It?
As a bit of a bonus, I'm adding this in. You may see or have seen libraries such as Vue or React that allow for the creation of components. These are fully-encapsulated UI items, that maintain their own HTML, CSS, and JS, and don't interfere with one another. It may be how you came up with the way you're trying to do it.
However, what these libraries do under the hood is, at compile time they "namespace" everything, similar to what I explained, above. Your <foo> component becomes <div class="foo"> and your a { font-weight: bold; } becomes foo a { font-weight: bold; }. Similar technique, just automated.
There are a couple of ways of doing this.
1. Using different selectors
If your <div>s are all being affected by bootstrap and you don't want that, then simply assign an id or class that is not being used by bootstrap and then this will not conflict with bootstrap's style.
A common class name used by bootstrap in some divs is the alert class. So if you have a div with a class alert, but you want it to look different than bootstrap's style, then consider it giving it another class name such as alert-custom to keep both styles applied to your elements (depending on what class is being applied to the element)
2. Overriding Style
You could override whatever style you have already loaded for a particular element by making the desired CSS declaration the bottom-most declaration for that particular element.
If you have some CSS rules for a <div> element in your bootstrap <link />, but then you declare some other rule in a <style> element somewhere else (anywhere is fine, as long as it is BELOW the style you want to override) for that particular element or tag, then that declaration will supersede the bootstrap styling.
3. In-line Styling
This will override any previous styles declared for a particular element. You can read more about it here
I hope this helps!
you can add the !important property to the item you want to modify, this property will overwrite the current one. For example:
<div class="your-class">Text modiefed</div>
<!-- new css -->
<style>
.your-class{
font-weight: bold!important;
}
</style>
I have a wordpress site and I am adjusting the css for responsiveness on different screen sizes. I changed a template that came with my theme for posts of a certain type. I would like to use the original template on smaller screen sizes. Any suggestions on how I could go about this? Thanks!
Media queries are computed by the browser, whereas templates are computed by the server, so there is no direct way to do this.
A common way though is to include the various templates on the server side and use media queries to only display the one you want.
You'd be looking at something like this:
<div class="mobile">
<?php get_template_part("content", "mobile"); ?>
</div>
<div class="desktop">
<?php get_template_part("content", "desktop"); ?>
</div>
And then in your CSS:
.desktop { display: none; }
#media (min-width: 800px) {
.mobile { display: none; }
.desktop { display: block; }
}
This will hide your desktop template on mobile, and vice versa. It will load your desktop template from content-desktop.php and your mobile one from content-mobile.php.
It's worth noting that while quick and easy, this usually isn't the best way to go about making a responsive website, because you'll be loading your content twice, and will find it a bit harder to maintain down the line. However, it's certainly a fine way to get started in making things responsive.
Can we embed php code in a css file. I need to add conditions to css properties.
styles.css
<?php
if($suserid == 2)
{ ?>
.proverb { border:0px solid blue; margin-left:34px; width:250px !important; margin-top:6px; } <?php
}
else
{ ?>
.proverb { border:0px solid blue; margin-left:0px; } <?php
}
?>
Your request is bad practice. Do not proceed.
While it is technically possible to do this, you should look into alternatives. Do not dynamically generate CSS files. They will be cached by your browsers, and dynamic changes will not be propagated.
Instead, make special-case classes that you can add to the HTML. Your CSS would become:
.proverb {
border: 0px solid blue;
margin-left: 0px;
}
.proverb.user-2 {
margin-left: 34px;
width: 250px !important;
margin-top: 6px;
}
In your HTML-generating code you can have:
<div class="proverb <?php if($suserid == 2) echo "user-2"; ?>"></div>
This will add the user-2 class if the user id is 2, and gives the same result as what you wanted in your example.
A file is considered PHP by the handlers your webserver attaches to a file type or file extension. If a file is considered PHP, the contents will be executed as PHP code.
Assuming you're using apache, you can add the php handler to CSS files by adding the following in your VirtualHost file or in your .htaccess file:
<Directory "/path/to/your/css/dir">
AddType application/x-httpd-php .css
</Directory>
The only downside is this changes the output mime-type to text/html of all css files in the given directory. Therefore you have to override the mime-type so browsers know you're sending css in stead of html. Trough PHP you can use: <?php header('Content-type: text/css'); ?> on the first line of every css file.
Keep in mind changing the handler to php for css files does put more stress on your server, since every file has to be parsed before it can be sent to the output buffer. Therefore it's easier and better to just add an extra class to your html output and adjust your css accordingly, like #Rizier123 suggests.
It's possible.
First you have to tell your web server to serve *.css files through the PHP ISAPI module, then you can embed the code.
But this is not a good practice and I'd advise not to do so. There are better solutions, like SASS and LESS.
We have a less file hi_style.less:
#import "css/base-ui.less";
#hi {
margin: 100px;
}
that includes another less file css/base-ui.less with lines like this:
.ui-go {
background: #74A372 url(<?php echo $l_uri; ?>/images/ui-go.png) repeat-x scroll 50% 50%;
}
The reason we need php (unless someone has a better idea) is because there is only one codebase but we have many sites attached to separate database from that singular codebase.
e.g.
site-a.mysite.com and site-b.mysite.com both use the same code but the urls are obviously different.
Is there a way to ignore the php tags in less or a better way to have explicit urls with one codebase.
We can't use relative paths as the base path can change and point to a different codebase.
Thanks in advance.
EDIT: It can't be a static file after it's processed because the codebases can be accessed via a url like: site-a.mysite.com/testing or site-a.mysite.com/beta so the url of the image file could be:
http://site-a.mysite.com/images/ui-go.png or
http://site-a.mysite.com/testing/images/ui-go.png or
http://site-a.mysite.com/beta/images/ui-go.png depending upon the codebase that's being accessed.
It seems to me that wrapping the url string in quote marks (which is quite valid; here I did single quotes ') will solve your issue. So...
.ui-go {
background: #74A372 url('<?php echo $l_uri; ?>/images/ui-go.png') repeat-x scroll 50% 50%;
}
That allows LESS to actually output the string with the php code (rather than throw an error), then when you run your compiled css through the php parser (I assume that is what you are doing), it should still fill in the echo value as needed.
I am going to start on a website whose requirement is to change the color scheme after every 2 weeks.
I am looking for a dynamic solution to change colours and somewhat structure of a website using css & php.
One solution which i can see is using dynamic css method for example
<?php
header("content-type: text/css");
$mencolour = "#ff0000";
echo 'h1 {color:$menucolor}
?>
Other solution is using some php classes to do the same task.
such as one is available on phpclasses website.
http://www.phpclasses.org/package/6482-PHP-Parse-and-process-Leaner-CSS-files.html
Is there any other better way of doing this? if any one has used above two methods, what could be drawbacks of using them.
Need some expert opinions :)
Sass is a popular CSS pre-processor that, among other things, lets you use variables in CSS, for things like your color scheme. You'd compile the CSS when you change it, so no need for the overhead of running a PHP script each time it loads. (Yeah, you could write your own cache system for that in PHP, but no need to redo others' hard work ;D)
$menu-color: #123456;
#menu { color: $menu-color; }
You can use a body class to change the theme:
/* Base style */
h1 { color: grey; }
.spring h1 { color: green; }
.summer h1 { color: yellow; }
.fall h1 { color: orange; }
.winter h1 { color: blue; }
To change the theme, just add the class on the body:
<body class="fall">
<h1>The leaves are falling!</h1>
</body>
Given that this is on a 2-week schedule, firing off a dynamically generated css file is overkill. It would be far easier to serve up a static .css file, which can be generated by PHP. That way you don't have to mess with outputtting cache headers and whatnot - the file will be cached the way any other static file would.
Use cron a similar timed-job tool to rebuild the .css file whenever you need those color changes to occur.
The PHP method, by default, would cause the clients to re-query the server for changes on every hit. That's a waste of bandwidth and cpu time just to change a few values once every 14 days.