Eine kurze Einführung in das CSS-Projekt Minimum Page

1. Autor, Download, Demo usw.

Das Minimum Page-Projekt wurde kürzlich von einigen Ausländern entwickelt und hat immer noch einen gewissen Referenzwert, also lasst uns darüber reden.

Diese beiden Jungs sind Peter Wilson und Josh Kinal. Sie haben einen Blog namens bigredtin, oder Sie können ihnen auf Twitter folgen: Peter und Josh.

Das Projekt ist derzeit auf Github, Sie können hier klicken, um es anzusehen. Die relevanten Quelldateien für die in diesem Artikel vorgestellten Dinge können hier heruntergeladen werden (freundliche Erinnerung: In jedem Browser sind standardmäßig integrierte CSS-Stile vorhanden).

Dieser Artikel enthält übrigens auch zwei verwandte Demos. Sie können hier klicken, um sie anzusehen: eine normale Demo und eine formularbezogene Demo.

Einige spezifische Codeänderungen am Minimum Page-Projekt oder einige allgemeine Vorschläge. Sie können es zur Seite mit dem Fragenbereich hinzufügen.

Hier herunterladen, Demo oder so. Nachdem Sie das Folgende gelesen haben, können Sie noch einmal zurückblicken, und Sie werden eine ungefähre Vorstellung davon haben, welche Art von Öl ausgepresst wird.

2. Welche Art von Zwiebel ist Minimum Page?

Nach meinem derzeitigen Verständnis geht es beim Minimum Page-Projekt lediglich darum, einige „interessante“ CSS-Codes einzubauen. Die beiden Projektgründer sind der Meinung, dass die derzeit verwendeten CSS-Reset- und CSS-Basis-Basisstile eine große Anzahl derselben unnötigen Stile neu erstellen müssen, insbesondere einige Stile, die in Browsern üblich sind. Beispiel:

Stellen Sie die Schriftstärke des Strong-Tags auf „Normal“ ein, oft müssen Sie es jedoch auf „Fett“ zurücksetzen.

Stellen Sie die Schriftstärke des b-Tags auf „Normal“ ein, oft müssen Sie sie jedoch auf „Fett“ zurücksetzen.

Stellen Sie die Schriftstärke der h1~h6-Tags auf „Normal“ ein und müssen Sie bei der Verwendung immer auf „Fett“ zurücksetzen.

Es gibt eine andere Situation, z. B. das Attribut list-style, bei dem beim Zurücksetzen des Stils manchmal Probleme bei der Neudefinition auftreten. Der folgende Code:

/* reset.css */li {
  list-style:none;
}/* base.css */ol li {  /*给ol下面的li标签以数值*/
  list-style: decimal outside;	
}
ul li {  /*给ul下面的li标签以圆点标记*/
  list-style: disc outside;
}

Wenn also die geordnete Liste und die ungeordnete Liste verschachtelt sind, sollte die verschachtelte geordnete Liste einen numerischen Wert anzeigen, aber das Ergebnis ist ein Punkt.

Sie können hier klicken: Demo zur geordneten ungeordneten Liste mit verschachtelten Konflikten

Obwohl Selektor ol > li und ul > , aber die Leute neigen immer dazu, die kleinste Menge Code zu verwenden.

Sie können hier klicken: UnterauswahlDemo zum Beheben von Konflikten

Lassen Sie mich hier abschweifen und meinen Anweisungen folgen. Sie wissen schon, das Die oben genannten Methoden von ul, ol und li sind allesamt ein Haufen Scheiße, die gut aussieht. Was ist die Erklärung? Da das li-Tag vererbbar ist, müssen wir uns überhaupt nicht um das li-Tag kümmern. Verwenden Sie einfach den folgenden CSS-Code:

ol {  /*给ol下面的li标签以数值*/
  list-style: decimal outside;	
}
ul {  /*给ul下面的li标签以圆点标记*/
  list-style: disc outside;
}

Der Code ist der kleinste und es gibt keine Verschachtelungskonflikte. Sie können hier klicken: Verschachtelungsdemo unter Vererbungsverwendung auflisten

3. Es scheint, dass das Minimum Page-Projekt spezielle CSS-Dateien enthält Nach Angaben des Sponsors sind die Stile außerhalb des Formulars begrenzt, d. h. Rand, Innenabstand oder einige Hintergrundfarben-Links werden auf blau hervorgehoben und nach Erhalt des Tastaturfokus in umgekehrter Reihenfolge angezeigt.

Formularstile wurden größtenteils aus dem Skeleton-Framework entfernt (freundlich für die Entwicklung mobiler Geräte), mit nur geringfügigen Änderungen und einer gewissen Codekomprimierung. Die gewöhnliche Demoseite der im ersten Teil gezeigten Demo enthält die meisten häufig verwendeten Elemente, während die formularbezogene Demo über eine eigene Demoseite verfügt.

四、做什么事的？

Minimum Page项目貌似是在做这么一件事：形成一个紧凑坚固的基础CSS，无需反复折腾浏览器一直的默认样式；但是，同时要保证在各个浏览器下对每个用户而言，看到的效果是一样的，而不必去担心会出现一两个妖孽的几像素问题。

为鼓励用户思考要插入他们自己站点的CSS代码。代码样式并不是最小化的那种形式，开发者是修改原来的基础的样式，是其更具有广泛性和通用性，以适合自己的站点。

五、这不就是normalize.css吗？

首先关于normalize.css项目，您可以点击这里查看：normalize.css。虽然normalize.css和minimum page都来自类似的地方， 都是旨在规避传统CSS reset且都只设置浏览器不一样的样式。但normalise.css采取更严格的方法，避免过多样式。

从另一方面讲，Minimum page包含了更多的样式（表单部分更多），并省去了很多小的差异。

没有哪个项目是阳光大道。这就是为什么这两个项目都没有提供最小化版本，以防止你盲目地添加到CSS reset中。

六、究竟为何物？

上面基本上按照官方首页称述的内容，估计还会让很多人是丈二的和尚-摸不着头脑。因此，我决定用更易于接受的方式介绍了Minimum Page项目究竟何物。
Minimum Page项目的终极产物形式就是个CSS文件(下载资源中的base.css和forms.css)。我们都知道CSS reset重置的终产物也是个CSS文件，只是里面的样式无论在各个浏览器中是否有差异都是置为0，或normal之类。

而这里Minimum Page项目：
1. base.css文件等只针对各个浏览器下有差异的元素进行样式定义（例如strong标签就忽略）。
2. 定义的样式不是盲目地置为0，而是仔细对比各个浏览器的默认值指定的最合适的值。例如列表样式：

就不是想也不想的：

ul, ol, dl {
    margin: 0;
    padding: 0;
}

3. 标签直接植入项目，自带一些UI属性样式。例如a标签链接色，或是figure标签下的图片：

figure img {
    background-color: #f3f3f3;
    padding: 4px;
    margin: 5px;
    border: 1px solid #ccc;
        border-radius: 3px;
}

可以看到有背景色，有padding有margin，还有圆角样式。这在专门提出来的forms.css中更为明显，从demo页面中中文本框等的样子就可以估计出各种HTML 表单控件的洋洋洒洒的样式了，我们在实际使用该项目成果的时候要根据站点的自身情况，修改（例如）这里的表单样式的。

当我们使用Minimum Page项目的时候，要结果我们站点自身的情况，对之中的CSS属性进行修改的。正如上面提到的，我们之所以把表单之类的CSS写的蛮精细的，就是方便偶们使用者进行修改。这也是为什么说项目不是正确方法，不对CSS文件最小化的原因。

提示：源文件中有个名叫_reference-ua-css的文件夹，其中的CSS文件都是各个浏览器内置的默认的一些CSS的样式值，从中你也看以看出，Minimum Page项目中所设置样式的CSS属性值都是经过仔细对比，设置的值也都是有过考量的，所以，还是相当有借鉴和参考意义的。

七、短短的结语

Ich kläre es auch während des Studiums, daher kann es zu Ungenauigkeiten im Artikel kommen. Was das Projekt selbst betrifft, so wage ich keine vorschnellen Kommentare abzugeben, da ich dessen Kern noch nicht genau erfasst habe. Sicher ist jedoch, dass einige von ihnen einige Schatten in meiner CSS-Architektur sehen, wie zum Beispiel, dass die konsistenten Standardeigenschaften des Browsers nicht zurückgesetzt werden.

Was halten Sie vom Browser-Standard-CSS in diesem Projekt?

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in das CSS-Projekt Minimum Page. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!