CSS für Media-Queries in einer Datei zusammengefasst

Es ist performanter, wenn der Browser nur eine CSS-Datei für das Screen-Layout
laden muss. Zudem ermöglicht die Zusammenfassung die Verschachtelung von
@media-Ausdrücken, da diese dann von LESS aufgelöst werden können.

diff --git a/pom.xml b/pom.xml
index 6eea9bab2be3e7dc2e2cc7facc461f5c4a3c99c9..b9e7a1b33e2a70c6552f53228fc9522462843f03 100644 (file)
--- a/pom.xml
+++ b/pom.xml
@@ -45,7 +45,7 @@
     <slf4j.version>1.5.8</slf4j.version>
     <springframework.version>3.2.4.RELEASE</springframework.version>
     <tiles.version>3.0.1</tiles.version>
-    <wro4j.version>1.7.2</wro4j.version>
+    <wro4j.version>1.7.3-SNAPSHOT</wro4j.version>
 
   </properties>
 

diff --git a/src/main/webapp/WEB-INF/templates/html-head.jsp b/src/main/webapp/WEB-INF/templates/html-head.jsp
index 1cf205c64b848d573d8fbeb99ab26005084a7469..61870cd5374972ed9f630b6345c20a9e502c0cd1 100644 (file)
--- a/src/main/webapp/WEB-INF/templates/html-head.jsp
+++ b/src/main/webapp/WEB-INF/templates/html-head.jsp
@@ -6,10 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
 <style type="text/css">
-  @import '${base}css/screen.css' screen and (min-width: 750px);
-  @import '${base}css/tablet.css' screen and (min-width: 750px) and (max-width: 939px);
-  @import '${base}css/phone.css' screen and (max-width: 599px);
-  @import '${base}css/tiny.css' screen and (max-width: 399px);
+  @import '${base}css/screen.css' screen;
 </style>
 <script src="${base}js/base.js"></script>
 <!--[if IE 8]>

diff --git a/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp b/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
index ae0fb6893bc189cbf05673b7a4e2ea5df05b7678..0ef0520c669b759fa2a2cced5272b77de40deb17 100644 (file)
--- a/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
+++ b/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
@@ -9,8 +9,7 @@
   <t:putAttribute name="htmlhead" type="string">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
-    <link rel="stylesheet/less" type="text/css" href="/less/screen/layout.less" />
-    <script src="/js/less.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="/css/seitenaufteilung.css" />
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
     <p>

diff --git a/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp b/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
index d7a94729782cebb81b603807fe94c90285565f6d..c9a82c0a00a73c22fd269f57c239f411d7bb9019 100644 (file)
--- a/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
+++ b/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
@@ -9,8 +9,7 @@
   <t:putAttribute name="htmlhead" type="string">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
-    <link rel="stylesheet/less" type="text/css" href="/less/screen/head.less" />
-    <script src="/js/less.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="/css/seitenkopf.css" />
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
     <p>

diff --git a/src/main/webapp/WEB-INF/views/test/tablet.jsp b/src/main/webapp/WEB-INF/views/test/tablet.jsp
index 5bf888230a3a809de3fc37744c1fe0004c8cdc16..cfe37c73d3c55a9b7c26df5382718ee9e09556b3 100644 (file)
--- a/src/main/webapp/WEB-INF/views/test/tablet.jsp
+++ b/src/main/webapp/WEB-INF/views/test/tablet.jsp
@@ -9,14 +9,12 @@
   <t:putAttribute name="htmlhead" type="string">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
-    <link rel="stylesheet" type="text/css" href="${base}css/screen.css" />
     <link rel="stylesheet" type="text/css" href="${base}css/tablet.css" />
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
     <p>
       Diese Seite bindet alle Styles ein, die für Tablets eingebunden
-      werden (<code>/css/base.css</code>, <code>/css/screen.css</code> und
-      <code>/css/tablet.css</code>).
+      werden (<code>/css/base.css</code> und <code>/css/tablet.css</code>).
     </p>
     <section>
       <h1>Weitere Experimente</h1>

diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index db202706ee4d5a9c02252b11f7014789450138aa..8dcf19d86729ce1df6eef380db4d50d45638a5e3 100644 (file)
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -1,43 +1,47 @@
 <groups xmlns="http://www.isdc.ro/wro">
 
   <group name="base">
-    <css>/less/base/browserreset.less</css>
-    <css>/less/base/fonts.less</css>
-    <css>/less/base/util.less</css>
-    <css>/less/base/typo.less</css>
-    <css>/less/base/head.less</css>
-    <css>/less/base/navigation.less</css>
-    <css>/less/base/content.less</css>
-    <css>/less/base/prettify.less</css>
-    <css>/less/base/marginal.less</css>
-    <css>/less/base/footer.less</css>
-    <css>/less/base/formulare.less</css>
+    <css>/less/base.less</css>
     <js>/js/prettify.js</js>
   </group>
 
   <group name="screen">
+    <css>/less/screen.less</css>
+    <css>/less/tablet.less</css>
+    <css>/less/phone.less</css>
+    <css>/less/tiny.less</css>
+  </group>
+
+  <!-- Diese werden nur für die explizite Auswahl eines Stylings benötigt -->
+  <group name="tablet">
+    <css>/less/variables.less</css>
     <css>/less/screen/typo.less</css>
     <css>/less/screen/layout.less</css>
     <css>/less/screen/head.less</css>
     <css>/less/screen/navigation.less</css>
     <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
-  </group>
-
-  <group name="tablet">
     <css>/less/tablet/layout.less</css>
     <css>/less/tablet/footer.less</css>
   </group>
-
   <group name="phone">
+    <css>/less/variables.less</css>
     <css>/less/phone/typo.less</css>
     <css>/less/phone/navigation.less</css>
   </group>
-
   <group name="tiny">
+    <css>/less/variables.less</css>
     <css>/less/tiny/typo.less</css>
     <css>/less/tiny/navigation.less</css>
   </group>
+  <group name="seitenaufteilung">
+    <css>/less/variables.less</css>
+    <css>/less/screen/layout.less</css>
+  </group>
+  <group name="seitenkopf">
+    <css>/less/variables.less</css>
+    <css>/less/screen/head.less</css>
+  </group>
 
   <group name="ie8">
     <js>/js/html5shiv.js</js>

diff --git a/src/main/webapp/less/base.less b/src/main/webapp/less/base.less
new file mode 100644 (file)
index 0000000..c8ab1ee
--- /dev/null
+++ b/src/main/webapp/less/base.less
@@ -0,0 +1,12 @@
+@import 'variables.less';
+@import 'base/browserreset.less';
+@import 'base/fonts.less';
+@import 'base/util.less';
+@import 'base/typo.less';
+@import 'base/head.less';
+@import 'base/navigation.less';
+@import 'base/content.less';
+@import 'base/prettify.less';
+@import 'base/marginal.less';
+@import 'base/footer.less';
+@import 'base/formulare.less';

diff --git a/src/main/webapp/less/base/formulare.less b/src/main/webapp/less/base/formulare.less
index 0e2ff37443f7b64d999449242981014096386fb2..158432492a1ff809635814ceded9084e6794ffc7 100644 (file)
--- a/src/main/webapp/less/base/formulare.less
+++ b/src/main/webapp/less/base/formulare.less
@@ -1,7 +1,5 @@
 /** Formulare *****************************************************************/
 
-@import '../variables.less';
-
 .form {
   position: relative;
   width: 100%;

diff --git a/src/main/webapp/less/base/head.less b/src/main/webapp/less/base/head.less
index 750995a6a1bf3c5a48577472a175b4f17756be12..3c956271bc7890ca2cda9d03046bf2e450fab4a0 100644 (file)
--- a/src/main/webapp/less/base/head.less
+++ b/src/main/webapp/less/base/head.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #header
 {
   .bpreplay;

diff --git a/src/main/webapp/less/base/marginal.less b/src/main/webapp/less/base/marginal.less
index 1b0868d3b3a973564ebd0f1f102b3aa64e36d5db..9d12af5a9974734eb9f73bb859a94384c787cb7a 100644 (file)
--- a/src/main/webapp/less/base/marginal.less
+++ b/src/main/webapp/less/base/marginal.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 .marginal h1
 {
   font-size: 125%; /** 20 px */

diff --git a/src/main/webapp/less/base/typo.less b/src/main/webapp/less/base/typo.less
index a8d2add4218ed8fe0a0560880617f8fba98dfe71..4516a9c5594fad240b9c6d5256ffc9448045e9a9 100644 (file)
--- a/src/main/webapp/less/base/typo.less
+++ b/src/main/webapp/less/base/typo.less
@@ -1,7 +1,5 @@
 /** Typografische Grundeinstellungen ******************************************/
 
-@import '../variables.less';
-
 body
 {
   .droid;

diff --git a/src/main/webapp/less/phone.less b/src/main/webapp/less/phone.less
new file mode 100644 (file)
index 0000000..86d429b
--- /dev/null
+++ b/src/main/webapp/less/phone.less
@@ -0,0 +1,6 @@
+@media screen and (max-width: 599px)
+{
+  @import 'variables.less';
+  @import 'phone/typo.less';
+  @import 'phone/navigation.less';
+}

diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less
new file mode 100644 (file)
index 0000000..110dc86
--- /dev/null
+++ b/src/main/webapp/less/screen.less
@@ -0,0 +1,10 @@
+@media screen and (min-width: 750px)
+{
+  @import 'variables.less';
+  @import 'screen/typo.less';
+  @import 'screen/layout.less';
+  @import 'screen/head.less';
+  @import 'screen/navigation.less';
+  @import 'screen/marginal.less';
+  @import 'screen/footer.less';
+}

diff --git a/src/main/webapp/less/screen/footer.less b/src/main/webapp/less/screen/footer.less
index c11be8ced1545370f116e82a47c620560cb5d50f..a9e0577117ac38a07a27d0a4bf403aade2e998ec 100644 (file)
--- a/src/main/webapp/less/screen/footer.less
+++ b/src/main/webapp/less/screen/footer.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #footer
 {
   padding: 2em 0;

diff --git a/src/main/webapp/less/screen/head.less b/src/main/webapp/less/screen/head.less
index b74093529cced09497754626693a351c071171c4..b0a20bbedbb49d94a210cc91426a247d3e5db344 100644 (file)
--- a/src/main/webapp/less/screen/head.less
+++ b/src/main/webapp/less/screen/head.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #header
 {
   margin-left: -4em;

diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less
index a8cf4ff6232d366460a3c8b7ef898504ab3482aa..2834d8f5c17e225f0261271517e4a36c7a467530 100644 (file)
--- a/src/main/webapp/less/screen/layout.less
+++ b/src/main/webapp/less/screen/layout.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 body
 {
   padding: 0 3em 0 5em;

diff --git a/src/main/webapp/less/screen/navigation.less b/src/main/webapp/less/screen/navigation.less
index e393589b22dad8fec8442820a617533cb662304e..b970440085e8dd8d835d5ecf0b8b9bc29dcd7b26 100644 (file)
--- a/src/main/webapp/less/screen/navigation.less
+++ b/src/main/webapp/less/screen/navigation.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #nav > hr
 {
   display: none;

diff --git a/src/main/webapp/less/tablet.less b/src/main/webapp/less/tablet.less
new file mode 100644 (file)
index 0000000..60456d9
--- /dev/null
+++ b/src/main/webapp/less/tablet.less
@@ -0,0 +1,6 @@
+@media screen and (min-width: 750px) and (max-width: 939px)
+{
+  @import 'variables.less';
+  @import 'tablet/layout.less';
+  @import 'tablet/footer.less';
+}

diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less
index c737f050e153ee118626c3f57133d0d6f6f7589b..df17d2f9b6b7513d7845b29aeda277b3fb7b29de 100644 (file)
--- a/src/main/webapp/less/tablet/footer.less
+++ b/src/main/webapp/less/tablet/footer.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 .cols_1 > #footer
 {
   margin: 0 0 0 -5em;

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index d7d37c99757ddf879df2bb3df879395987812565..6d97d708bd93a9dc9c1c3e2196a9e12956331de2 100644 (file)
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 body
 {
   padding: 0 0 0 5em;

diff --git a/src/main/webapp/less/tiny.less b/src/main/webapp/less/tiny.less
new file mode 100644 (file)
index 0000000..ef1470b
--- /dev/null
+++ b/src/main/webapp/less/tiny.less
@@ -0,0 +1,6 @@
+@media screen and (max-width: 399px)
+{
+  @import 'variables.less';
+  @import 'tiny/typo.less';
+  @import 'tiny/navigation.less';
+}