是否有一种方法可以在需要时附加其他样式的CSS文件


Is there a way to append a CSS file with additional styles when needed?

我在一个网站上工作,它吸收了许多css文件。其中一些是针对国际用户的特定语言覆盖(我们更改了一些样式,以便较长的翻译文本字符串不会破坏布局)。比如法语。css,西班牙语。css等等。当用户单击语言切换器时,页面会重新加载,并在body标签上添加一个特殊的类。这就是页面选择其他样式的方式。

在不久的将来,我们的目标之一是只为我们的国际用户提供一个适合他们的特定语言文件。现在,每个人都得到了所有的风格,即使他们不是必需的。同时,其中一个管理人员希望将我们的样式合并到一个文件中,以减少http请求。我们怎么能有一个css文件不包括所有的语言覆盖每个用户?是否有一种方法可以在需要时将样式附加到一个主要的css文件?我们使用Compass SASS;有没有办法编译我们主文件的不同版本,一个包含西班牙语风格,一个包含法语风格,等等?理想情况下,我们不希望在工作目录中有不同版本的主css文件,因为我们总共支持25种语言。此外,我们的开发人员使用PHP和JavaScript,以防有人有使用这些编程语言的解决方案。

编辑-我应该澄清一下。是否有一个脚本或函数,将抓取样式块从一个css文件,并将它们直接添加到另一个,这将是一个主要的css文件的用户服务?只有当用户在我们的网站上更改他们的语言选择时,才会执行此操作。或者,由于我们使用的是SASS,在框架中是否有办法让编译器生成25个css版本的main。每个版本都包含特定的语言覆盖(在sass目录的根目录中没有25个.scss版本)?

可以使用php实现。你需要创建一个包含所有css的php文件,并将其包含在索引文件中:

<link rel="stylesheet" type="text/css" href="css_file.php">

然后创建css_file.php并使用以下代码:

<?php
header("Content-type: text/css; charset: UTF-8");
// get the language variable from url
$language = $_GET['langvar'];
if($language == "en"){
    // english language css code goes here
    echo "
    body { margin: 0; padding: 0; }
    ";
} else if($language == "fr"){
    // french language css code goes here
    echo "
    body { margin: 0; padding: 0; }
    ";
} else if($language == "other"){
    // other language css code goes here
    echo "
    body { margin: 0; padding: 0; }
    ";
}
?>
编辑:

如果语言变量在你的代码中不存在,你可以从会话中获取语言:

<?php
    session_start();
    header("Content-type: text/css; charset: UTF-8");
    // get the language variable from active session
    $language = $_SESSION['langvar'];
    if($language == "en"){
        // english language css code goes here
        echo "
        body { margin: 0; padding: 0; }
        ";
    } else if($language == "fr"){
        // french language css code goes here
        echo "
        body { margin: 0; padding: 0; }
        ";
    } else if($language == "other"){
        // other language css code goes here
        echo "
        body { margin: 0; padding: 0; }
        ";
    }
    ?>
编辑:

如果你想加载单独的css文件,你需要添加以下php代码到你的索引文件:

<?php
    session_start();
    // get the language variable from active session
    $language = $_SESSION['langvar'];
    if($language == "en"){
        // english css file load
        echo "<link rel='"stylesheet'" type='"text/css'" href='"english.css'">";
    } else if($language == "fr"){
        // french css file load
        echo "<link rel='"stylesheet'" type='"text/css'" href='"french.css'">";
    } else if($language == "other"){
        // other css file load
        echo "<link rel='"stylesheet'" type='"text/css'" href='"other.css'">";
    }
    ?>

如果语言会话名称与css文件相同,可以使用:

<?php
        session_start();
        // get the language variable from active session
        $language = $_SESSION['langvar'];
        echo "<link rel='"stylesheet'" type='"text/css'" href='"".$language.".css'">";
        ?>