为什么我的PHP项目中的CSS突然停止起作用了？

Question

我正在使用Bootstrap作为CSS框架，但是我的自定义外部CSS突然停止工作了，我不知道为什么。当我尝试将CSS代码复制到另一个新创建的文件中时，它可以正常工作，但随后又会失效。是否使用PHP会影响这一点？

更新：
实际上，CSS在php文件中加载缓慢。服务器环境是否会影响外部CSS的加载速度？

以下是CSS代码：

/* 省略部分CSS代码 */

以下是HTML代码：




    
    Dashboard

我已经尝试将CSS代码转移到另一个文件中，但它会在不明确的情况下停止工作。

Randomblue · Answer

您遇到的自定义外部CSS无法稳定应用的问题可能是由以下几个潜在因素引起的：

缓存问题：Web浏览器会对CSS文件进行缓存以提高加载速度。当您更新CSS文件时，浏览器可能仍在使用缓存版本。尝试清除浏览器缓存或使用强制刷新（大多数浏览器按Ctrl+F5）来查看是否解决了此问题。

路径问题：确保指向CSS文件的路径是正确的。有时，在不同环境（如开发环境和生产环境）之间切换可能会改变相对路径。

样式表加载顺序：由于您正在使用Bootstrap，请确保您的自定义CSS在HTML中加载在Bootstrap CSS之后。这样可以确保您的自定义样式优先于Bootstrap样式。

CSS特异性：确保您的自定义CSS选择器比Bootstrap的选择器具有更高的特异性。有时，由于Bootstrap样式具有更具体的选择器，可能会覆盖您的自定义样式。

PHP服务器响应：如果您正在使用PHP服务器，请检查是否有任何服务器端问题导致CSS文件加载延迟。PHP本身不应影响CSS加载，除非服务器处理静态文件的方式存在问题。

文件权限：验证CSS文件的文件权限。不正确的权限可能会阻止浏览器加载该文件。

CSS语法错误：CSS文件中的语法错误可能导致部分CSS无法应用。可以使用W3C CSS验证服务等工具验证您的CSS。

网络问题：如果CSS文件较大或者网络较慢，这都可能导致CSS文件加载延迟。使用浏览器开发者工具检查网络加载时间。

关于CSS在PHP文件中加载缓慢的更新，服务器配置或网络问题可能影响加载速度。实时服务器环境的性能可能各不相同，因此如果CSS在本地环境中加载正常但在实时服务器上加载缓慢，可能需要检查服务器配置和网络条件。

另外，考虑优化CSS文件，通过压缩它，并检查是否存在不必要的大型导入或媒体，这些可能正在减慢其加载时间。

coobird · Answer

Without being able to test on your system or a duplicate of it, it's difficult for anyone to give a reliable answer. However, given the symptoms you describe, and from just looking at your code, I suspect it is your implementation of the web font (with @import), resource loading, timing and browser display (including possible caching)--assuming the rest of your code (particularly the PHP) isn't the issue.

The First Candidate For Troubleshooting ...

The @import method is a good candidate for troubleshooting the issue--I find it to be slower than linked implementations, generally, and is the first thing I would do away with, to test.

Remove it from your above CSS and use the following code outside of it as separate links, instead.

<!-- webfont -->

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900"; rel="stylesheet">

<!-- bootstrap -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">;

<!-- bootstrap icons -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">;

<!-- custom css -->

<link rel="stylesheet" href="../assets/css/mainStyle.css">

Note: This may be faster, but is still blocking, in terms of loading. Further down, in this answer, I'll include a link to an article explaining an alternative method.

IMPORTANT: Don't forget to add to your custom css:

font-family: 'Poppins', sans-serif;

You can remove the '&display=swap' part from the end of the font link if you like, or change the method implemented for the font-display property. There are 5 options for the font-display property you can use.

The methods available are:

auto

block

swap

fallback

optional

A good article that helps explain use of the font-display property in conjunction with Google Fonts can be found here:

https://www.sitepoint.com/how-to-use-google-fonts/" rel="nofollow noreferrer">https://www.sitepoint.com/how-to-use-google-fonts/>

The 'swap' method will load the browser's default font immediately and then load Poppins when a user's browser has fully loaded it. If you prefer, you can use '&display=fallback' instead, like so:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=fallback"; rel="stylesheet">

Another Way To Speed CSS Loading ...

One method some pursue when chasing faster load times is to use a combination of LINK tags with:

rel="preload"

Note that this begins asynchronous loading but DOES NOT read the CSS--you have to use a second LINK tag to the same resource, declare and change media types, or use an other method to trigger the browser read of the contents. It's important if you use that method, that you're familiar with all the issues around it. See the article here, for a good explanation:

https://dev.to/masakudamatsu/loading-google-fonts-and-any-other-web-fonts-as-fast-as-possible-in-early-2021-4f5o" rel="nofollow noreferrer">https://dev.to/masakudamatsu/loading-google-fonts-and-any-other-web-fonts-as-fast-as-possible-in-early-2021-4f5o>

Other Speed And Optimization Considerations ...

Now, issues to keep in mind and that might help optimize your load times, the number of font variations included, the browser a user happens to be loading the page in, and where the resource is loaded from.

Among the other considerations that will help reduce load times (which may or may not be part of the cause of inconsistent CSS loading), you might consider downloading the Google Font of your choice (Poppins, in this case) and serving it from:

The same server your HTML/content is being served from, as any other asset (yoursite.com/path/to/your/font).

Same server, from a subdomain (like static.yoursite.com).

From a separate server, regardless of domain/subdomain status (like: cdn.anothersite.com), often faster than Google's servers which are under heavy use--particularly if it's a server you have configured, tuned, and is in the same datacenter and/or on the same subclass C network as your website.

Now, are you actually using 9 font weights/variations of your chosen font on a given page, and/or on every page?

If you're only using 4 font-weights on most pages and you only have a few pages or some specific section of your site/app that uses all 9 fonts, then you can speed up loading and rendering by doing something like this for most pages:

<!-- webfont -->

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600;800&display=swap"; rel="stylesheet">

<!-- bootstrap -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">;

<!-- bootstrap icons -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">;

<!-- custom css -->

<link rel="stylesheet" href="../assets/css/mainStyle.css">

And, on the pages that make use of all 9 font variations, use the appropriate LINK tag with all nine. You might even experiment with inserting a LINK tag for all 9 font variations before the closing BODY tag on pages that only require 4 and see if it then makes a difference when hitting the pages that use all 9 (for this, allow caching of resources so your tests actually test the benefit/speed gains from using the cache and pre-caching).

Embedding Fonts Can Be An Option ...

You might consider embedding your font in your code, rather than linking to it. This can be a faster loading solution IF USING ONLY A FEW FONT WEIGHTS AND/OR VARIATIONS. The Base64 encoded result for nine font weights and variations (Italic, etc) can get very large, so be aware. There are articles out there on embedding fonts, so it shouldn't be hard to find something on how to do it, but I'll include one that might be helpful, should you be interested in going that route.

https://morganmacarthur.com/css-embed-google-fonts/" rel="nofollow noreferrer">https://morganmacarthur.com/css-embed-google-fonts/>

As always, be sure to check Google's help--they do have lots of useful documentation.

https://fonts.google.com/knowledge/using_type/using_web_fonts" rel="nofollow noreferrer">https://fonts.google.com/knowledge/using_type/using_web_fonts>

Test From Multiple Environments ...

Lastly, it is important to consider your webserver, network and load times/speed. Fire up your local PHP built in server on your local system, load the page(s) in question with your Developer Tools open in your browser and be sure to check the appropriate setting so that your browser DOES NOT store items in cache. Then reload it several times, checking the average times for fetching the resources from Google. Fire up a local webserver (XAMP, WAMP, a local install of NGINX, Caddy, Apache, whatever...I use Linux Containers on my Ubuntu Linux laptop) on your machine or LAN, and do the same.

Compare average load times against what you see when checking the same way with your app deployed on your Production/Live server. If your Production/Live server is returning slower times than your Local/LAN testing environment in fetching un-cached resources from Google's servers, you may need to consider new platform or hosting provider. Just test every manner of implementing your CSS locally and on your Production/Live server. Fire up a small VPS or container with another provider to compare things against.

Keep in mind you're linking to Google's servers and so are a great many sites/apps online. You can optimize linking and caching of resources (and subsequent page loads should be faster because of caching), but users can and often do have quirky preferences. Some people disable browser caching on laptops/desktops to ensure they're always fetching the latest data. Mobile users generally don't do this, because, data costs... But there's a lot to give consideration to.

To recap, general principles I like to make use of to speed up font/css loading and avoid timing/rendering/performance issues are:

Link fonts, rather than use @import in CSS files

Host/serve fonts locally if practical

User fewer font variations

Encode as Base64 and embed if it offers performance improvement in a given use case

It's possible the @import isn't the primary, or even largest concern, in your case, but I hope all of this helps. Just remember to test and validate. Good luck.