Loading...
 

Tikiwiki-devel (mailman list mirror)


You are viewing a reply to CSS Compatibility Issues  

CSS Compatibility Issues

posts: 43753 Canada

I will take a closer look at the package you've suggested.

We could do things similarly to how we're doing them now with a bootstrap-like environment, however node, npm & postcss would become server requirements. I don't think ruby for our functionally but could be corrected on that. Then a PHP program would provide all the configurations and possibly even install some (maybe all?) the software required if its not found. So we could still php console.php less:compile or scss:compile. (maybe we can think if a generic name?)

Better to do as much as we can in pure PHP I agree. Less error-prone. Less OS-specific requirements and procedures. More robust, and we're a bunch of PHP programmers, it's what we know.

Brendan



> On Jun 13, 2018, at 7:12 PM, Gary Cunningham-Lee <gary_c@cunningham-lee.com> wrote:
>
> Is it possible to use https://packagist.org/packages/kriswallsmith/assetic , which we're already integrating and which has this filter: "AutoprefixerFilter: Parse and update vendor-specific properties using autoprefixer"?
>
> I'm thinking we can't really duplicate the Bootstrap workflow since it uses NPM, node.js, and Ruby, unless we give up our current method that uses PHP and works well up to the point of autoprefixing. But I only have an end-user understanding of these things.
>
> — Gary
>
>
>> On 6/13/2018 5:39 PM, Brendan Ferguson wrote:
>> Thanks. I did do a little work on this. That php lib is non-functional, and it turns out was a little hacky anyhow. I looked a little into the bootstrap workflow and think duplicating what they are doing may be worth while.
>> Brendan
>>> On Jun 13, 2018, at 5:22 PM, Gary Cunningham-Lee <gary_c@cunningham-lee.com> wrote:
>>>
>>> To keep this on the radar, I added a bug report/wish here: https://dev.tiki.org/item6699
>>>
>>> — Gary (it kinda looks like /itemFancyQuotes, or have I had too much coffee? ;-) )
>>>
>>>
>>>> On 6/7/2018 9:13 AM, Brendan Ferguson wrote:
>>>> On Wed, Jun 6, 2018 at 2:44 PM, Gary Cunningham-Lee <gary_c@cunningham-lee.com <mailto:gary_c@cunningham-lee.com>> wrote:
>>>> Thanks for spotting that, Brendan. I saw some vendor prefixes in our
>>>> final CSS so assumed it was all being handled in the compiling, but
>>>> after comparing one of our compiled stylesheets to the Bootstrap
>>>> dist bootstrap.css, I see many are missing. My first thought is +1 to option 1. I agree that this has the most
>>>> advantages. So this would mean setting up and documenting the
>>>> workflow, for any devs that want to be compiling CSS.
>>>> That was my thought also.
>>>> I wonder if https://github.com/vladkens/autoprefixer-php
>>>> <https://github.com/vladkens/autoprefixer-php> be used with our
>>>> current workflow (compiling in PhpStorm) along with node.js.
>>>> I think it could be. It's a stagnant project and the error checking in it is poor, but there is not a lot of code, so it should not be too much work to fix a few things if we really need to. It should be able to integrate into our current workflow nicely, we will just have to have a check to see if node.js is installed and prompt users with a download link if it's not found.
>>>> About option 3, I assume the number of browser versions needing
>>>> vendor prefixes are significant. I don't know that for a fact,
>>>> though. If it was relatively small, then maybe option 3 should be
>>>> considered. But this doesn't seem like a very good solution.
>>>> The number of prefixes needed is huge, and its a neverending process. CSS keeps changing and browsers keep adding prefixes to experimental features. Then people upgrade and want the new features, etc. etc.
>>>> This is exciting for me, as I think implementing this will reduce the volume of compatibility related support requests and make Tiki a much more "stable" platform than its ever been. We've never had a good system for dealing with browser prefixes and I'm optimistic that this is a good solution.
>>>> Brendan
>>>> — Gary
>>>> On 6/6/2018 11:53 AM, Brendan Ferguson wrote:
>>>> I was just combing over the CSS, and thought I might write some
>>>> mininxs to make prefixing within our code a little easier and
>>>> cleaner.
>>>> I discovered a real issue with compatibility of which the scope
>>>> of which warrants community discussion.
>>>> Bootstrap SCSS was written simply so that Autoprefixer could
>>>> apply compatibility and fixes to allow the code to run on the
>>>> supported browsers. Right now bootstrap supports:
>>>> "last 1 major version",
>>>> ">= 1%",
>>>> "Chrome >= 45",
>>>> "Firefox >= 38",
>>>> "Edge >= 12",
>>>> "Explorer >= 10",
>>>> "iOS >= 9",
>>>> "Safari >= 9",
>>>> "Android >= 4.4",
>>>> "Opera >= 30"
>>>> (taken from
>>>> https://github.com/twbs/bootstrap/blob/v4.1.1/package.json
>>>> <https://github.com/twbs/bootstrap/blob/v4.1.1/package.json>)
>>>> However the SCSS is written for the most recent version with
>>>> zero prefixes, and then autoprefixer applies prefixes and other
>>>> fixes that enable the above support.
>>>> However Tiki does not use autoperfixer, so none of our code is
>>>> auto-prefixed. However to make matters worse, we are also
>>>> compiling the bootstrap SCSS, but without the autoprefixer that
>>>> it was intended to go through, so our CSS files that are being
>>>> generated will only reliably work on the most recent browsers
>>>> out there.
>>>> I can see 3 options for moving forward:
>>>> 1. We adopt autoprefixer, and closely mimic what bootstrap does.
>>>> https://getbootstrap.com/docs/4.1/getting-started/build-tools/
>>>> <https://getbootstrap.com/docs/4.1/getting-started/build-tools/>. This
>>>> has the most advantages. We could even autoprefix almost all the
>>>> CSS even from other projects, so we always ensure maximum
>>>> compatibility with little bloat. However this does require Node
>>>> to be installed, so there is no pure PHP way of doing this
>>>> without first installing a dependency on the system. It wold
>>>> also allow us to take full advantage of using all the SCSS
>>>> functions, vars and mininxs.
>>>> 2. We limit our inclusion of bootstrap to pre-compiled css, find
>>>> our own way ensure the comparability of our own code, upstream
>>>> any incompatibilities found in vendor css, or patch it locally.
>>>> 3. We accept the incompatibility and update our supported
>>>> browsers page to match.
>>>> Thoughts?
>>>> ------------------------------------------------------------------------------
>>>> Check out the vibrant tech community on one of the world's most
>>>> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
>>>> ___
>>>> TikiWiki-devel mailing list
>>>> TikiWiki-devel at lists.sourceforge.net
>>>> <mailto:TikiWiki-devel@lists.sourceforge.net>
>>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>>> <https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel>
>>>> ------------------------------------------------------------------------------
>>>> Check out the vibrant tech community on one of the world's most
>>>> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
>>>> ___
>>>> TikiWiki-devel mailing list
>>>> TikiWiki-devel at lists.sourceforge.net
>>>> <mailto:TikiWiki-devel@lists.sourceforge.net>
>>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>>> <https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel>
>>>> ------------------------------------------------------------------------------
>>>> Check out the vibrant tech community on one of the world's most
>>>> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
>>>> ___
>>>> TikiWiki-devel mailing list
>>>> TikiWiki-devel at lists.sourceforge.net
>>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>>
>>>
>>> ------------------------------------------------------------------------------
>>> Check out the vibrant tech community on one of the world's most
>>> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
>>> ___
>>> TikiWiki-devel mailing list
>>> TikiWiki-devel at lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>> ------------------------------------------------------------------------------
>> Check out the vibrant tech community on one of the world's most
>> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
>
> ------------------------------------------------------------------------------
> Check out the vibrant tech community on one of the world's most
> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.