# dryan-decss **Repository Path**: mirrors/dryan-decss ## Basic Information - **Project Name**: dryan-decss - **Description**: Decss 的功能是通过 HTML/CSS/JS 来制作友好的演示 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: https://www.oschina.net/p/decss-js - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-11-02 - **Last Updated**: 2025-08-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Decss Present from the Web, Beautifully Decss was designed from the ground up to be a presenter-friendly way to give presentations in HTML/CSS/JS. Using modern markup, with the old `` tag repurposed, you can quickly build a deck that everyone will love. ## Requirements To stay lightweight, Decss requires modern browser functionality. However, if you want to support older browsers, you may use [https://github.com/inexorabletash/polyfill](https://github.com/inexorabletash/polyfill) and [https://github.com/douglascrockford/JSON-js](https://github.com/douglascrockford/JSON-js) to meet the requirements. When a browser does not meet all the requirements, a class of `not-supported` is added to `` tag. You may use that class to show a message to viewers. ## Basic Usage Three files are required to use Decss: `modernizr.js`, `decss.min.js` and `decss.css`. You can host these yourself or get point to: * http://dryan.github.io/decss/js/modernizr.js * http://dryan.github.io/decss/js/decss.min.js * http://dryan.github.io/decss/css/decss.css If you want to use your own version of Modernizr, please include the Flexible Box Model (not the legacy version), CSS 3D Transforms and CSS Boxsizing (available under non-core detects) tests. ```html My Awesome Presentation ``` ### Markup A deck consists of a container element with `id="deck"` (the "deck element") containing one or more `

`s, which act as the slides. ```html

Welcome to My Awesome Presentation

Here's some bullets:

To being with
But also
And finally

``` Each slide may contain any markup you choose. The `

` and `` tags act as special layout triggers. In browsers that support the modern flexbox syntax, content inside the `` tag will be vertically centered in a single column. `` will align its children in a single row, instead. A `

` that is the only child of a `

` acts like a `` tag as well. ### Images To place multiple images in a row, wrap them with a `

` tag. Additionally, add a class of `two-up`, `three-up`, `four-up` or `five-up` depending on how many images there are. ```html

``` ### Background Images Slide backgrounds are set using the normal CSS `background-image` property. Decss sets these to use `background-size: cover` for you. ```html

``` ## Builds / Steps Sometimes you want items to appear manually instead of when the slide first appears. Adding a `data-step` attribute to elements achieves this. ```html

Building Suspense

Step 1
Step 2
Step 3

``` In this example, no bullets would be visible at first. As you navigate forward through the deck, each one will show in turn. Once the last step has become visible, navigating forward again moves on to the next slide. Note that multiple elements can share the same step and will be made visible at the same time. Steps may also be nested: ```html

Building Suspense

Step 1: but wait, there's more!
Step 2
Step 3

``` In this example, the first bullet would appear with just "Step 1" visible, then the rest would appear before "Step 2". ## Audio and Video Decss supports multimedia via `